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/