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

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

前言

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://shenqiku.cn/article/FLY_7115