最近项目中用到了antd-mobile中的PullToRefresh,我到官网上去看例子,差点被劝退(本人主攻后端开发),花了好一番力气,终于用最少的代码开发出来可用的功能。
好了,不多逼逼了,直接上代码(直接复制就能用):
import { PullToRefresh} from 'antd-mobile';
//组件,直接复制过去就能用
<PullToRefresh
//这里不用改
damping={60}
//这个就是拉动的时候的提示语
indicator={{deactivate: '上拉可以刷新'}}
//上拉还是下拉
direction="up"
//拉动的刷新函数,数据更新就写在这里
onRefresh={() => {
if (this.state.cursor === "0") {
return
}
//这个函数让每次刷新维持一秒
setTimeout(() => {
//我的数据刷新函数
this.searchStatus(user.uid, cursor, size)
}, 1000);
}}
>
//每次数据调用数据刷新函数将数据刷新之后,下面这个就直接将结果更新显示出来。
<Flex wrap={"wrap"}>
{statuses.map(i => this.showStatus(i))}
</Flex>
</PullToRefresh>
本文分享了使用 Ant Design Mobile 中 PullToRefresh 组件的实际经验,通过简洁的代码示例展示了如何实现上拉刷新功能,特别适合后端开发者快速上手。
4060

被折叠的 条评论
为什么被折叠?



