微信小程序 实现防抖音上下滑动切换直播间
<swiper-item class="demo-text-1"> <view class="box"> <live-player class="live"></live-player> <view class="abs"></view> </view> </swiper-item> <swiper-item class="demo-text-2"> <view class="box"> <live-player class="live"></live-player> <view class="abs"></view> </view> </swiper-item></swiper>page{ height: 100%; } .swiper{ width: 100%; height: 100%; } .demo-text-1{ background-color: green; } .demo-text-2{ background-color: pink; } .box{ width: 100%; height: 100%; position: relative; } .box .abs{ width: 80rpx; height: 80rpx; position: absolute; left: 200rpx; bottom: 120rpx; background-color: yellow; } .box .live{ width: 100%; height: 100%; opacity: 0; } Page({ data: { index:0 }, onLoad(){ wx.getSystemInfo({ success: (res) => { this.setData({ SystemInfo:res }) } }); }, bindtransition(e){ let screen = this.data.SystemInfo, swiperTouchinfo = e.detail; console.log(screen); //下滑 if(screen.windowHeight ==swiperTouchinfo.dy && swiperTouchinfo.dy>1){ this.setData({ index:this.data.index+1 }) } //上滑 if(-screen.windowHeight ==swiperTouchinfo.dy && swiperTouchinfo.dy<1){ this.setData({ index:this.data.index-1 }) } console.log(e) }})代码原理 由swiper 的bindtransition 位置发生改变时监听 去判断 item偏移值的正负 如果切换正好是全屏的高度 这样我们就可以求出上滑与下滑