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

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

要回复文章请先登录注册

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
n***@qq.com

n***@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