杨大宝
杨大宝
  • 发布:2018-08-16 10:42
  • 更新:2023-09-13 20:17
  • 阅读:24510

【申精】swiper + scroll-view 实现下拉刷新

分类:uni-app

各位D友大家好,相信大家对uniapp都非常的喜欢,非常好的设计,能省去我们很多的开发成本。但是因为有一些是不尽人意的,比如我们想要实现的和原生效果接近的滑动tab 下拉刷新,官方给出的示例中无法支持下拉刷新。在此我放出一个的解决方案,可以实现我们要的效果。但是毕竟是投机取巧,还是希望官方可以出个单独的插件。闲话少说,开始~

首先我们知道 原生下拉刷新的出发是根据page的scrollTop触发的。当scrollTop为0时才开始触发。那么,我们就可以根据这个来实现了

第一步,页面构建完成之后开始计算你的scroll-view需要的高度,scroll-view tabList 的高度要求超出屏幕可视高度1个标准单位(太多体验不好)。

第二步,添加scroll-view 的scroll事件,获取scrollTop值。判断当scrollTop大于0的时候调用pageScrollTo方法将page 的 scroll 拉至1
这样scroll-view在下拉的时候就不会触发系统下拉刷新的动作

第三步,添加scroll-view 的scrolltoupper事件并设置属性upper-threshold=0,事件触发时调用pageScrollTo方法将page 的 scroll 拉至0就能正常的使用下拉刷新了。

第四步,在tab切换时也判断当前scroll的scrollTop,然后调整当前tab的page scrollTop。

至此,swiper scroll-view 下拉刷新 就完成了,是不是很简单。

缺点:头部tabBar会上下1个标准单位的跳动(不过能接受,不是很影响)
下面贴出我的代码:

效果演示:

15 关注 分享
DCloud_heavensoft n***@qq.com x***@sina.com Mr王 言会咸 Bear大熊 d***@foxmail.com 2***@qq.com 2***@qq.com 7***@qq.com 2***@qq.com louman 理子 7***@qq.com 一又一分之一

要回复文章请先登录注册

l***@163.com

l***@163.com

回复 狮王电竞 :
scolle监控一下,是否在顶部,不是顶部禁用下拉刷新 设置refresher-enabled
2023-09-13 20:17
狮王电竞

狮王电竞

回复 5***@qq.com :
同问
2021-01-19 09:30
l***@163.com

l***@163.com

回复 5***@qq.com :
有同样问题 请问有解决办法吗
2020-11-06 13:24
5***@qq.com

5***@qq.com

scroll-view横向滚动时,怎样才能禁止下拉刷新
2020-07-21 16:40
木子霂

木子霂

这个问题,有没有示例或源码,光看代码,有些看不懂
2020-07-16 18:09
74581

74581

请问下,您有没有遇到过swiper嵌套swiper外层是左右滑动,里面是上下滑动,当是在支付宝小程序中,在里面上下滑动的区域里不能左右滑动,只有在左右滑动的swiper-item左右边距中才能左右滑动
2019-12-10 09:49
愚者

愚者

回复 头号bug :
؏؏☝ᖗ乛◡乛ᖘ☝؏؏
2019-08-30 17:00
Smile晴天

Smile晴天

回复 诗小柒 :
能分享一下吗?
2019-07-05 21:23
Smile晴天

Smile晴天

回复 诗小柒 :
能分享一下吗
2019-07-05 21:22
1***@qq.com

1***@qq.com

回复 头号bug :
测试无效
2019-04-20 17:35