[移动开发]微信小程序 实现防抖音上下滑动切换直播间

<swiper class="swiper" vertical="true"   bindtransition ="bindtransition" circular="{{index!==0?true:false}}">
    <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 位置发生改变时监听 去判断 是否切换 如果切换整好是全屏的高度 这样我们就可以求出上滑与下滑