随笔- 66 文章- 0 评论- 6 阅读- 16万

react 上拉加载组件的使用

移动端前端需要实现分页功能，与传统的pc端分页不同，决定使用蚂蚁的长列表组件，支持上拉加载及下拉刷新（本文只涉及上拉加载）

引入组件：

1	`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) //传入一个空数组
}