PullDown
加载更多组件
- 书写时PullDown组件在可加载列表的前面。
- 可通过loadCallback设置下拉的执行回调。
- 如果当前列表存在自定义的滚动条，需要通过getTarget传递滚动的目标，且滚动元素的子元素必须只有一个。
- 只有getTarget的元素(默认window)滚到最顶端的时候，才能触发下拉。
主要属性和接口：
- loadCallback:点击按钮加载或滑到底部自动加载的回调函数。
- getTarget: 如果当前列表存在自定义的滚动条，需要传递滚动的目标。
示例：
<div style={{height:'300px',overflow:'auto'}} ref={(list)=>this.list=list}> // 用到getTarget需要保证只有一个子元素，包裹住滚动的所有内容
<div>
<List>...</List> // 可加载列表的位置
<PullDown loadCallback={this.loadCallback.bind(this)}
getTarget={()=>{return list;}} />
</div>
</div>Constructor
PullDown
PullDown
()
Example:
import React, { Component } from "react"
import PullDown from "phoenix-ui/lib/pulldown"
import List from "phoenix-ui/lib/list"
import Code from "./code/code"
import {ajax} from "./utils/tool.js"
export default class pulldown extends Component{
constructor(props,context){
super(props,context);
this.count = 0;
this.state = {
loadingData : [],
status: 1, // 状态：0"加载更多",1"加载中",2"加载成功",3"加载失败",4"没有更多"
visible1: false,
}
this.loadCallback();
}
// 加载更多的执行回调(点击按钮刷新或滑倒屏幕最下方自动刷新)
loadCallback(){
this.getData("./data/post"+(this.count?this.count:'')+".json") // 开始请求数据
this.count++
if(this.count>3) this.count=0;
}
getData(fileName){ // 获取数据方法，请求状态status必须准确返回
ajax(fileName).then((json)=>{// 数据处理
let data = json.data;
this.setState({
loadingData: data
});
});
}
render(){
return(
<div>
<h2 className="comp-title">PullDown</h2>
<h3 className="comp-type">loadCallback 加载更多的回调函数</h3>
<h3 className="comp-type">getTarget 如果当前列表存在自定义的滚动条，需要传递滚动的目标</h3>
<div>
<PullDown loadCallback={this.loadCallback.bind(this)}/>
<List>
{
this.state.loadingData.map((item,index)=>{
return (
<List.Item key={index}>
<List.Col>{item.title}</List.Col>
</List.Item>
)
})
}
</List>
</div>
</div>
);
}
}方法
getTarget
getTarget
()
Object
如果当前列表存在自定义的滚动条，需要传递滚动的目标
Returns:
[Object]
目标元素的ref
loadCallback
loadCallback
()
滑到底部自动加载的回调函数，用户在该函数内自定义请求
属性
classPrefix
String
样式前缀
Default:
'pulldown'