react 上拉加载组件的使用
移动端前端需要实现分页功能，与传统的pc端分页不同，决定使用蚂蚁的长列表组件，支持上拉加载及下拉刷新（本文只涉及上拉加载）
引入组件：
|
1
|
import { ListView } from 'antd-mobile'; |
定义一些初始状态：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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, //是否还有更多数据 }; } |
调用组件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<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} /> |
选择每行数据
|
1
2
3
4
5
6
7
8
9
10
|
// 渲染每一行数据 const row = (rowData, sectionID, rowID) => { return( <div> <div>{rowData.username}</div> <div>{rowData.billNo}</div> ... </div> ) } |
上拉加载更多：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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:[ ] 是不起作用的，需要创建一个新的空数组如下：
|
1
2
3
4
5
6
|
et emptyList = allBillData.splice(0,allBillData.length) //把原来的数据源清空再生成一个空数据this.setState({ page:'1', //页码变为1 dataSource:this.state.dataSource.cloneWithRows(emptyList) //传入一个空数组} |