小程序swiper下拉判断是否拉到底部

更新日期: 2020-01-01 阅读: 2.9k 标签: 下拉

前言

swiper没有这个功能:小程序竖向swiper滚动到底部,再往下拉判断到底的功能。 本妹子为了完成“下拉到底就弹框”的业务,想了下面的办法,给小伙伴们分享下。


实现

给 swiper 添加 transition , swiper-item 的位置发生改变时会触发 transition 事件,并获得 x、y 轴改变的指, event.detail = {dx: dx, dy: dy} 。然后将改变值存入数组中,当改变值为 0 ,而且数组的最后一位数有值时,则判断到底了。

wxml:

<swiper  bind:transition="_transition">
        <block wx:for="" wx:for-item="item" wx:for-index="idx" wx:key="activityId">
            <swiper-item">
               <view>test</view>
            </swiper-item>
        </block>
    </swiper>

js:

//存储y轴改变值
 this.dyAry=[];
//eventhandle swiper-item 的位置发生改变时会触发
 _transition(e) {
    if (this.lastData) {
      let dy = e.detail.dy;
      //如果到底部还继续往下拉,这弹出提示框
      if (dy == 0 && this.dyAry[this.dyAry.length - 1] > 0) {
        this.dyAry = [];
        wx.toast('swpier都看完啦')
      }
      this.dyAry.push(dy)
    }
  }

原文 https://raoenhui.github.io/wechat/2019/12/31/swiper/

本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!

链接: https://fly63.com/article/detial/7115

uni-app下拉刷新加载刷新数据

onPullDownRefresh 监听该页面用户下拉刷新事件 需要在 pages.json 里 开启 enablePullDownRefresh,当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新

原生JS实现下拉刷新 全局

实现的原理是通过获取①获取滚动条当前的位置②获取当前可视范围的高度 ③获取文档完整的高度 ;(一)获取滚动条当前的位置 ;(二)获取当前可视范围的高度

微信h5页面下拉露出网页来源的解决办法

微信h5页面下拉露出网页来源的解决办法:将document的touchmove事件禁止掉,备注:要加上 passive: false,不然会出现以下报错

移动端禁止下拉 露出网址或广告

移动端禁止下拉 露出网址或广告;目前自测安卓 微信内、uc、小米浏览器 效果都不错。

floating-vue:Vue官方推荐的弹层组件,轻松实现Tooltip和下拉菜单

在Vue应用开发中,我们经常需要实现提示框、下拉菜单、弹出层这样的交互效果。以前要实现这些功能很麻烦,需要自己处理定位、动画、边缘检测等问题。现在有了floating-vue,这些问题都变得简单了。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!