zoukankan      html  css  js  c++  java
  • 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/

      

  • 相关阅读:
    jstat使用
    oracle 定期copy 大表统计信息(分区表)
    PL/SQL注册码
    Linux系统--命令行安装weblogic10.3.6
    oracle 11.2.0.4 dbca创建数据库时 报错ORA-12532
    自动重建索引脚本
    oracle 添加登陆数据库触发器--记录IP 地址
    oracle 触发器
    oracle 定位SQL
    查询rman 备份信息集
  • 原文地址:https://www.cnblogs.com/javenlee/p/10736167.html
Copyright © 2011-2022 走看看