Ant Design Mobile上拉刷新/加载更多_ant design mobile使用教程-CSDN博客

本文展示了如何在React应用中利用Ant Design Mobile库的PullToRefresh和InfiniteScroll组件来实现列表的下拉刷新和无限滚动加载功能。通过定义状态和接口调用来获取数据，并在组件生命周期方法中更新数据。同时，详细说明了loadMore函数的实现，确保在数据加载完成后更新加载状态。

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

1、引入组件定义参数

import { PullToRefresh, List, Image, InfiniteScroll, Empty } from 'antd-mobile';

interface States {
    list: any
    hasMore: boolean
    params: GoodsListDto
}
this.state = {
    list: [],
    hasMore: false,
    params: {
        pageSize: 10,
        pageNum: 1
    }
}

2、请求列表接口

componentDidMount() {
    this.queryList(this.state.params)
}

queryList(params: GoodsListDto): Promise<ResultPageResultTestGoodsVo> {
    this.setState({ params });
    return new Promise((resolve, reject) => {
        api.mockGoodsList(params)
            .then((res: ResultPageResultTestGoodsVo) => {
                if (res && res?.data?.content) {
                    this.setState({
                        list: res.data.content,
                        hasMore: res.data.content.length > 0
                    })
                }
                this.setState({ hasMore: false })
                resolve(res)
            })
            .catch((res: ResultPageResultTestGoodsVo) => {
                this.setState({ hasMore: false })
                reject(res)
            })
    })
}

3、加载更多函数/loadMore

loadMore需要返回 promise
hasmore结束 loadmore函数

async loadMore() {
    const res = await this.queryList({
        ...this.state.params,
        pageNum: this.state.params.pageNum + 1
    })
    if (res && res.data?.content) {
        this.setState({ hasMore: res.data.content.length >= 10 })
    }
}

4、render(){} 渲染

<PullToRefresh
    onRefresh={async () => {
        this.queryList({ ...params, pageNum: 1, })
    }}
>
    <List style={{ '--font-size': '14px' }}>
        {
            list.map((item: TestGoodsVo) => (
                <List.Item
                    style={{ border: 0 }}
                    key={item.id}
                    arrow={false}
                    onClick={() => { this.handleDetail(item) }}
                    prefix={
                        <Image
                            src={item.goodsPic || ''}
                            style={{ borderRadius: 5 }}
                            fit='cover'
                            width={120}
                            height={120}
                        />
                    }
                    description={
                        <div>
                            <p className="des mt5">{item.goodsDesc}</p>
                            <p className="amount">￥{item.goodsAmt}</p>
                            <p className="tip">{item.goodsInfo}</p>
                        </div>
                    }
                >
                    {item.goodsDesc}
                </List.Item>
            ))
        }
    </List>
    <InfiniteScroll loadMore={this.loadMore.bind(this)} hasMore={hasMore} threshold={100} />
</PullToRefresh>