前几天分享了一个自己做的关于小程序组件扩展的开源项目(传送门)
然后就是监听 scroll-view 的 onscroll 事件,这里我将下拉刷新的状态分为五种:
那么在事件监听中根据当前的 scrollTop 来判断应该在哪一种状态:
问题来了,什么时候刷新呢?小程序的 scroll-view 并没有 onscrollend 这种事件,于是我想到了 ontouchend,毕竟在手机上也只能用触摸来滑动(点击头部返回顶部除外),所以只需要在 ontouchend 事件中监听如果当前的下拉状态是2(_pullDownStatusDic.release)即松开可刷新时,就触发刷新:
当然这个时候还有个问题,我们需要把刷新文字局域显示出来,我们是没办法吧一个 scroll-view 的 scrollTop 设为负数的,所以只能将 scroll-view 的y轴偏移取消来解决(产生的问题就是松手时会有一下弹动,后期会想办法进行优化) 完成刷新后,再将 scroll-view 的y轴偏移通过css动画再变回 -40px(用 translate 而不用 margin 就是为了此处动画的流畅度),这样就完成了一次下拉刷新。 是不是很简单:) 另外还有一些小细节,还有加载更多,还有 xing-image 的一些实现,就更简单了,有兴趣的可以看看源码 |
小程序scroll-view自身下拉刷新的实现分享
发布:2018-05-08 10:58浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08