antd-mobile中的PullToRefresh最简单的使用,绝对能让你学会

本文分享了使用 Ant Design Mobile 中 PullToRefresh 组件的实际经验,通过简洁的代码示例展示了如何实现上拉刷新功能,特别适合后端开发者快速上手。

最近项目中用到了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>

就这么简单,觉得有用可以点赞一波哦

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值