杨大宝
杨大宝
  • 发布:2018-08-16 10:42
  • 更新:4 天前
  • 阅读:4469

【申精】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个标准单位的跳动(不过能接受,不是很影响)
下面贴出我的代码:

效果演示:

10 关注 分享
DCloud_heavensoft nuqut@qq.com xiangdeshan_120@sina.com 1910563900@qq.com 709615106@qq.com Bear大熊 dadadaso@foxmail.com 294823561@qq.com 2457242355@qq.com 752767935@qq.com

要回复文章请先登录注册

1157817265@qq.com

1157817265@qq.com

回复 头号bug: 测试无效
4 天前
dadadaso@foxmail.com

dadadaso@foxmail.com

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

86300845@qq.com

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

头号bug

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

598220654@qq.com

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

Viccy

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

Viccy

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

791758820@qq.com

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

abongo66

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

淡了个淡

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

641749347@qq.com

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

mengmeng

回复 DCloud_heavensoft: 模拟器,点击后无反应,用的是天天模拟器
2018-10-06 23:23
青麻

青麻

Mark一下,很有用
2018-10-06 21:44
DCloud_heavensoft

DCloud_heavensoft

回复 mengmeng: 是Android模拟器还是真机,具体什么型号
2018-10-06 16:40
mengmeng

mengmeng

回复 DCloud_heavensoft: 1.51版本的基座在安卓版本4.4.4下无法运行,白屏
2018-10-06 13:11
DCloud_heavensoft

DCloud_heavensoft

最新版uniapp支持了nvue,复杂列表拖来拖去性能也没问题。app里可以使用nvue。小程序里还是得用这个方案
2018-10-01 21:37
nuqut@qq.com

nuqut@qq.com

mark
2018-09-06 06:00
DCloud_heavensoft

DCloud_heavensoft

注意这个做法是纯前端实现,没有原生加持。使用这种方案是尽量避免列表的复杂化。
2018-09-06 01:46
诗小柒

诗小柒

up主,推荐你去看看我微信小程序写的用swiper + scroll-view 写的下拉刷新,上啦加载,体验超群,近期打算做成组件分享出来(等 uni 解决vue 组件的scope )
2018-08-20 10:26
uniapper

uniapper

mark
2018-08-16 13:54