移动端前端需要实现分页功能,与传统的pc端分页不同,决定使用蚂蚁的长列表组件,支持上拉加载及下拉刷新(本文只涉及上拉加载)
引入组件:
import { ListView } from 'antd-mobile';
定义一些初始状态:
constructor(){
super();
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state={
page:"1", //页码
row:'10', // 每页条数
totalPage:"", //总页数
dataSource: ds, //长列表加载数据源
billData:[], //每页数据
preBillData:[], //原始的订单列表
allBillData:[], //原始的+每一页新的数据
isLoading :true, //是否加载中
isHasMore :false, //是否还有更多数据
};
}
调用组件:
<ListView
ref={el => this.lv = el}
dataSource={this.state.dataSource}
renderFooter={() => (<div style={{ padding:5, textAlign: 'center',fontSize:'14px' }}>
{
isHasMore && ( isLoading ? <span className='list_loading'>加载中...</span> : '已加载')
}
{
billData.length!=0 && (!isHasMore && '没有更多内容')
}
</div>)}
renderRow={row} //每行数据渲染
style={{
minHeight:'calc(100vh - 20px)', //高度需要定义
overflow: 'auto',
}}
pageSize={10} //一次渲染几条数据
onEndReached={this.onEndReached}
onEndReachedThreshold={10}
/>
选择每行数据
// 渲染每一行数据
const row = (rowData, sectionID, rowID) => {
return(
<div>
<div>{rowData.username}</div>
<div>{rowData.billNo}</div>
...
</div>
)
}
上拉加载更多:
onEndReached = () => {
const {page,row,totalPage,isLoading,isHasMore} = this.state
//当前已加载的条数小于total总条数 请求下一页数据,否则停止请求数据
if((Number(page)-1) < Number(totalPage)){
this.setState({
isLoading: true
})
this.getBatchData()
}else{
this.setState({
isLoading:false,
isHasMore:false
})
}
}
分页请求数据成功后:
数据源dataSource接受的参数是当前页数据加上之前的原始数据
若某些时候需要清除数据源重新渲染,如同页面筛选过滤时,直接把dataSource:[ ] 是不起作用的,需要创建一个新的空数组如下:
et emptyList = allBillData.splice(0,allBillData.length) //把原来的数据源清空再生成一个空数据
this.setState({
page:'1', //页码变为1
dataSource:this.state.dataSource.cloneWithRows(emptyList) //传入一个空数组
}
更多用法见https://mobile.ant.design/components/list-view-cn/