ant design List长列表下拉刷新上拉加载更多

最新推荐文章于 2024-08-13 08:59:15 发布

qq_31182399

最新推荐文章于 2024-08-13 08:59:15 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： js ant react

本文链接：https://blog.csdn.net/qq_31182399/article/details/115724587

本文探讨了在Ant Design Mobile中使用ListView组件进行数据加载和滚动优化的方法。内容包括：设置`PullToRefresh`实现下拉刷新，利用`onEndReached`触发上拉加载更多数据，以及调整`onEndReachedThreshold`来优化滚动体验。同时，展示了如何定制渲染行和列表头部，以及处理数据源更新的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、html
	import styles from './index.less';
	import { ListView,List,PullToRefresh  } from 'antd-mobile';
	const Item = List.Item;
	const Brief = Item.Brief;
	const { theadData, data, total, currentPage, onSuccess, onSuccessEnter, isMore, showNum,refreshing } = props;
	<ListView
                dataSource={dataSource.cloneWithRows(data)}
                renderFooter={() => (<div style={{ padding: 10, textAlign: 'center' }}>
                    {isMore? '加载中...' : ''}
                </div>)}
                renderRow={(rowData, id1, i) => renderRow(rowData)}
                onEndReachedThreshold={20}
                onEndReached={onEndReached}
                useBodyScroll //useBodyScroll 跟随body滚动 不传必须给定容器的高度
                pullToRefresh={
                    <PullToRefresh
                        refreshing={refreshing}
                        onRefresh={onRefresh}
                    />
                }
   />
   <--渲染内容-->
   const dataSource = new ListView.DataSource({
        rowHasChanged: (row1: any, row2: any) => row1 !== row2,
    });
    const renderRow = (item: any) => {
        return (
            <List renderHeader={() => 'Align Vertical Center'} className="my-list">
                <Item multipleLine extra="extra content">
                    {item.title} <Brief>subtitle</Brief>
                </Item>
            </List>
        )
    };
    <--操作-->
    const onEndReached=()=>{
        let obj = {
      		currentPage: currentPage,
    	};
	    obj.currentPage++;
	    if (total / obj.currentPage > showNum) {
	      onSuccess({currentPage:obj.currentPage});
	    }
    }
    const onRefresh=()=>{
        onSuccess({refresh:true});
   }
2、style
	//当不传useBodyScroll 时 滚动区域高度屏幕高度-上面部分高度
	.am-list-view-scrollview {
      overflow: initial;
      height: calc(100vh - 2.14rem);
    }
    .am-list-view-scrollview-content {
      height: 100%;
    }
    .am-list-footer {
      padding: 0;
    }