由于数据量比较大,加载时不一次性加载全部数据,而是通过参数page_size加载数量、current_page当前页两个参数查询数据,实现滑动加载
<ListView
className="applyList"
key={this.state.useBodyScroll ? '0' : '1'}
ref={el => this.lv = el}
dataSource={this.state.dataSource} //数据来源
renderFooter={() => (
<div style={{ padding: 30, textAlign: 'center', color: "#007AFF"}}>
{this.state.hasMore ? '正在刷新...' : '已显示全部数据'}
</div>
)}
renderRow={row} //子组件样式
renderSeparator={separator}
useBodyScroll={this.state.useBodyScroll}
className="container"
style={this.state.useBodyScroll ? {} : {height: this.state.height,} }
initialListSize = {10}
/>
render
let row;
if(this.state.rowCount > 0){
row = (rowData, sectionID, rowID) => {
var item = rowData;
//return出子组件
return (
<MessageCard
applyId={item.hasOwnProperty('apply_id')?item.apply_id:''} //申请id
states={item.hasOwnProperty('states')?item.states:''} //当前订单状态
state={item.hasOwnProperty('state')?item.state:''} //当前流程状态
adminName={item.hasOwnProperty('admin_name')?item.admin_name:''} //管理员名称
beginTime={item.hasOwnProperty('begin_time')?item.begin_time:''} //开始时间
endTime={item.hasOwnProperty('end_time')?item.end_time:''} //结束时间
/>
);
};
}
定义查询方法
//查询数据
async getBorrowData(params){
//console.log(this.state.Lists)
this.setState({isLoading: true})
try{
//调用后台接口
let data = await service.useQuery(params);
//状态码,1代表成功
if (data.RetCode === '1') {
//将新查询出的数据拼接到原有数据尾部
let list = this.state.Lists.concat(data.DataRows);
//如果没有更多数据
if(data.DataRows.length < this.state.pageSize) {
//设置状态,false将显示底部,并且不会继续触发滑动加载
this.setState({hasMore: false})
}
//数据总量
let rowCountNum = this.state.rowCount + data.DataRows.length;
//设置状态,dataSource为antd要求格式
this.setState({
Lists: list,
dataSource: this.state.dataSource.cloneWithRows(list),
rowCount: rowCountNum,
})
}else{
this.setState({
Lists: this.state.Lists,
dataSource: this.state.dataSource.cloneWithRows([]),
rowCount: this.state.rowCount,
})
}
}catch(e){
Toast.fail(e.message)
}
}
定义滑动加载
//滑动加载信息
onEndReached = () => {
let params = {};
params.page_size = this.state.pageSize;
params.current_page = ++pageIndex;
if(this.state.hasMore){
this.getData();
}
};