AntDesign 长列表的使用

最新推荐文章于 2025-10-06 02:03:59 发布

原创最新推荐文章于 2025-10-06 02:03:59 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

react 同时被 2 个专栏收录

7 篇文章

订阅专栏

antd

4 篇文章

订阅专栏

本文介绍了一种在大量数据环境下，通过滑动加载和数据分页技术优化用户体验的方法。利用React组件和Ant Design库，实现了动态加载数据，避免了一次性加载全部数据导致的性能瓶颈。文章详细解释了如何通过参数控制数据加载，以及如何在底部显示加载提示。

由于数据量比较大，加载时不一次性加载全部数据，而是通过参数page_size加载数量、current_page当前页两个参数查询数据，实现滑动加载

<ListView
    className="applyList"
    key={this.state.useBodyScroll ? '0' : '1'}
    ref={el => this.lv = el}
    dataSource={this.state.dataSource} //数据来源
    renderFooter={() => (
        <div style={{ padding: 30, textAlign: 'center', color: "#007AFF"}}>
            {this.state.hasMore ? '正在刷新...' : '已显示全部数据'}
        </div>
    )}
    renderRow={row} //子组件样式
    renderSeparator={separator}
    useBodyScroll={this.state.useBodyScroll}
    className="container"
    style={this.state.useBodyScroll ? {} : {height: this.state.height,} }
    initialListSize = {10}
/>

render

let row;
if(this.state.rowCount > 0){
    row = (rowData, sectionID, rowID) => {
        var item = rowData;
        //return出子组件
        return (
            <MessageCard 
                applyId={item.hasOwnProperty('apply_id')?item.apply_id:''} //申请id
                states={item.hasOwnProperty('states')?item.states:''} //当前订单状态
                state={item.hasOwnProperty('state')?item.state:''} //当前流程状态
                adminName={item.hasOwnProperty('admin_name')?item.admin_name:''} //管理员名称
                beginTime={item.hasOwnProperty('begin_time')?item.begin_time:''} //开始时间
                endTime={item.hasOwnProperty('end_time')?item.end_time:''} //结束时间
            />
        );
    };
}

定义查询方法

//查询数据
async getBorrowData(params){
    //console.log(this.state.Lists)
    this.setState({isLoading: true})
    try{
    	//调用后台接口
        let data = await service.useQuery(params);
        //状态码，1代表成功
        if (data.RetCode === '1') {
        	//将新查询出的数据拼接到原有数据尾部
            let list = this.state.Lists.concat(data.DataRows);
            //如果没有更多数据
            if(data.DataRows.length < this.state.pageSize) {
            	//设置状态，false将显示底部，并且不会继续触发滑动加载
                this.setState({hasMore: false})
            }
            //数据总量
            let rowCountNum = this.state.rowCount + data.DataRows.length;
            //设置状态，dataSource为antd要求格式
            this.setState({
                Lists: list,
                dataSource: this.state.dataSource.cloneWithRows(list),
                rowCount: rowCountNum,
            })
        }else{
            this.setState({
                Lists: this.state.Lists,
                dataSource: this.state.dataSource.cloneWithRows([]),
                rowCount: this.state.rowCount,
            })
        }
    }catch(e){
        Toast.fail(e.message)
    }
}

定义滑动加载

//滑动加载信息
 onEndReached = () => {
     let params = {};
     params.page_size = this.state.pageSize;
     params.current_page = ++pageIndex;
     if(this.state.hasMore){
     	this.getData();
     	
     } 
 };