react 上拉加载组件的使用

移动端前端需要实现分页功能，与传统的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/