PullUp
加载更多组件
- 书写时PullUp组件在可加载列表的后面。
- 通过mode设置加载更多的模式，有点击按钮加载更多，以及滑到最底端自动加载，可选 [auto,button] 2种参数。
- 通过status设置当前状态，只需要在请求结束返回相应状态，包含请求成功返回2，请求成功并再没有数据返回4，请求失败返回3。
- 可通过tips设置按钮文字和状态提示语，默认['加载更多','','加载成功','加载失败','没有更多']，分别对应status的状态。
- 可通过phStyle设置按钮的样式，如果当前mode为auto设置无效。
- 可通过loadCallback设置点击按钮加载或滑到底部自动加载的回调函数，如果状态为4不执行。
- 如果当前列表存在自定义的滚动条，需要通过getTarget传递滚动的目标，且滚动元素的子元素必须只有一个。
主要属性和接口：
- mode:加载更多的模式，默认auto。
- status:当前状态:0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多。
- tips:按钮文字和状态提示语，默认['加载更多','','加载成功','加载失败','没有更多']。
- phStyle:按钮的样式，默认'primary'。
- loadCallback:点击按钮加载或滑到底部自动加载的回调函数。
- getTarget: 如果当前列表存在自定义的滚动条，需要传递滚动的目标。
示例：
<div style={{height:'300px',overflow:'auto'}} ref={(list)=>this.list=list}> // 用到getTarget需要保证只有一个子元素，包裹住滚动的所有内容
<div>
<List>...</List> // 可加载列表的位置
<PullUp mode='button' status={this.state.status}
tips={['点击加载更多','加载中...','加载成功！','加载失败！','没有更多']}
phStyle='primary'
loadCallback={this.loadCallback.bind(this)}
getTarget={()=>{return list;}} />
</div>
</div>Constructor
PullUp
PullUp
()
Example:
import React, { Component } from "react"
import PullUp from "phoenix-ui/lib/pullup"
import List from "phoenix-ui/lib/list"
import PullDown from "phoenix-ui/lib/pulldown"
import Code from "./code/code"
import {ajax} from "./utils/tool.js"
export default class pullup 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++
}
getData(fileName){ // 获取数据方法，请求状态status必须准确返回
ajax(fileName).then((json)=>{// 数据处理
let data = json.data;
let loadingData = this.state.loadingData.slice(0);
for(let i in data){
loadingData.push(data[i]);
}
// 必需
this.setState({
loadingData: loadingData,
status: json.final? 4:2 // 根据final判断是加载成功还是没有更多
});
}, (error)=>{
// 加载失败，必需
this.setState({
status: 3
})
});
}
refreshCallback(){
console.log('refresh!!!')
}
render(){
return(
<div>
<h2 className="comp-title">PullUp</h2>
<h3 className="comp-type">mode(默认auto) 加载的模式(自动加载或按钮)</h3>
<h3 className="comp-type">status 当前状态(0加载更多, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多)</h3>
<h3 className="comp-type">tips 设置按钮文字和状态提示语</h3>
<h3 className="comp-type">phStyle(默认primary) 按钮的样式</h3>
<h3 className="comp-type">loadCallback 加载更多的回调函数</h3>
<h3 className="comp-type">getTarget 如果当前列表存在自定义的滚动条，需要传递滚动的目标</h3>
<div ref={(list)=>this.list=list}>
<PullDown loadCallback={this.refreshCallback.bind(this)}/>
<div>
<List>
<List.Header>加载更多</List.Header>
{
this.state.loadingData.map((item,index)=>{
return (
<List.Item key={index}>
<List.Col>{item.title}</List.Col>
</List.Item>
)
})
}
</List>
<PullUp status={this.state.status} loadCallback={this.loadCallback.bind(this)}/>
</div>
</div>
</div>
);
}
}方法
getTarget
getTarget
()
Object
如果当前列表存在自定义的滚动条，需要传递滚动的目标
Returns:
[Object]
目标元素的ref
loadCallback
loadCallback
()
滑到底部自动加载的回调函数，用户在该函数内自定义请求
属性
classPrefix
String
样式前缀
Default:
'pullup'
mode
String
加载更多的模式，可选[auto,button], 默认auto
Default:
'auto'
phStyle
Array
按钮颜色，默认primary
Default:
'primary'
status
Number
加载状态：0初始状态, 1加载中, 2数据加载成功, 3数据加载失败, 4没有更多
Default:
0
tips
Array
加载5个状态的文字描述，默认['加载更多','','加载成功','加载失败','没有更多']
Default:
['加载更多','加载中','加载成功','加载失败','没有更多']