36

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

 4 years ago
source link: https://raoenhui.github.io/wechat/2019/12/31/swiper/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

前言

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)
    }
  }

Happy coding .. :)


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK