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