E企盈营销工具技术服务商 热线:4006-838-530

小程序scrollvie沙雅县E企盈小程序w自身下拉刷新的实现分享

前几天分享了一个自己做的关于小程序组件扩展的开源项目(传送门)本来就是想给自己发布的第一个开源代码骗骗star,结果有不少善良的朋友给文章点赞了,搞得我有点不好意思,所以决定写点干货讲讲具体是怎么实现的。其实也比较简单,首先自定义组件下的 scroll-view 高度设为比组件本身高出 40px,即头部显示刷新文字的区域高度,然后让 scroll-view y轴偏移 -40px,这样刷新文字区域就在顶部看不到了,具体css如下:.scroll-view {  height: calc(100% + 40px);  transform: translateY(-40px);}复制代码

然后就是监听 scroll-viewonscroll 事件,这里我将下拉刷新的状态分为五种://这段偷懒没写在代码里,直接用的数字const _pullDownStatusDic =  {  invisiable: 0,  //看不见  pulling: 1,     //下拉时  rele开通全棉竹节卫衣小程序电话:4006-838-530ase: 2,     //可松开刷新时  refresing: 3,   //正在刷新  finish: 4,      //刷新完成}复制代码

那么在事件监听中根据当前的 scrollTop 来判断应该在哪一种状态://height就是预设的下拉至多少高度时刷新if (scrollTop -1 * height) {  targetStatus = 2;} else if (scrollTop 0) {  targetStatus = 1;} else {  targetStatus = 0;}复制代码

问题来了,什么时候刷新呢?小程序的 scroll-view 并没有 onscrol开通翻译笔小程序电话:4006-838-530lend 这种事件,于是我想到了 ontouchend,毕竟在手机上也只能用触摸来滑动(点击头部返回顶部除外),所以只需要在 ontouchend 事件中监听如果当前的下拉状态是2(_pullDownStatusDic.release)即松开可刷新时,就触发刷新:if (status === 2) {  this.setData({    pullDownStatus: 3,  })  this.properties.refreshing = true,  this.triggerEvent('pulldownrefresh');}复制代码

当然这个时候还有个问题,我们需要把刷新文开通奔驰小程序电话:4006-838-530字局域显示出来,我们是没办法吧一个 scroll-viewscrollTop 设为负数的,所以只能将 scroll-view 的y轴偏移取消来解决(产生的问题就是松手时会有一下弹动,后期会想办法进行优化)完成刷新后,再将 scroll-view 的y轴偏移通过css动画再变回 -40px(用 translate 而不用 margin 就是为了此处动画的流畅度),这样就完成了一次下拉刷新。是不是很简单:)另外还有一些小细节,还有加载更多,还有 xing-image 的一些实现,就更简单了,有兴趣的可以看看源码最后再骗一波star:View on Github

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序scrollvie沙雅县E企盈小程序w自身下拉刷新的实现分享
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏