uniapp-下拉刷新

先上效果图
直接下拉
在这里插入图片描述

在这里插入图片描述

顺序发生变化,说明刷新成功
第二种效果,点击按钮刷新
在这里插入图片描述
在这里插入图片描述

一样刷新成功

实现步骤
创建list页面
在这里插入图片描述

在pages.json里配置
在这里插入图片描述

把这一句去掉,或者改为false,意思是不允许全部页面都可以下拉刷新
在这里插入图片描述

这里是允许该页面下拉刷新
到list.vue里写代码
在这里插入图片描述

先写一个数据数组

然后用遍历展示出来
在这里插入图片描述

然后写直接下拉刷新的
在这里插入图片描述

用setTimeout来实现延迟效果,这里延迟是1000ms,也就是1s
uni.stopPullDownRefresh()是停止刷新指令

第二种,用按钮实现下拉刷新
在这里插入图片描述

先写一个按钮,用click来监听事件pullDown
在这里插入图片描述

在方法里写事件,uni.startPullDownRefresh(),该指令有延迟和停止刷新效果,所以无需用到uni.stopPullDownRefresh()和setTimeout()
ok。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WinFang5

good!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值