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

【申精】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 一又一分之一

要回复文章请先登录注册

d***@foxmail.com

d***@foxmail.com

scroll-view怎么阻止下拉刷新啊
2019-02-25 13:26
8***@qq.com

8***@qq.com

mark
2019-02-23 10:03
头号bug

头号bug

直接swiper用定位 再用view(设宽高100%再padding-top掉swiper的高)包住scroll-view(设高100%)就可以实现作者的说的效果
2019-01-28 18:19
5***@qq.com

5***@qq.com

回复 诗小柒 :
哪里啊 发个地址来参考一下怎么写下拉刷新 非常着急!!
2019-01-28 17:56
Viccy

Viccy

求源码
2018-12-27 13:54
Viccy

Viccy

有源代码吗?能分享一下吗
2018-12-27 13:54
7***@qq.com

7***@qq.com

能在单页里面放置 swiper 轮播图嘛? 比如在进行中放个轮播图 滑动轮播图 不切换到其他tab?
2018-12-11 16:41
abongo66

abongo66

有源代码吗?能分享一下吗
2018-10-30 11:08
淡了个淡

淡了个淡

回复 诗小柒 :
你写的swiper + scroll-view的项目地址能发下吗,学习学习
2018-10-30 09:46
6***@qq.com

6***@qq.com

楼主能贴出源码吗
2018-10-24 10:42