Vant-Swipe轮播组件控制可滑动区域范围

使用移动端触摸事件touchstart、touchend来动态改变swipe的touchable属性值。
代码如下:

<div @touchstart="swipeClick($event)" @touchend="swipeClickEnd" id="newEnergyTabCard">
   <van-swipe @change="onChange" ref="newEnergySwipe" :touchable="touchable">
        <template #indicator>
        </template>
        <van-swipe-item class="tab">
        </van-swipe-item>
        <van-swipe-item class="tab">
        </van-swipe-item>
   </van-swipe>
</div>
swipeClick(event) {
    // 获取第一个触点
    let touch = event.touches[0];
    // 页面触点Y坐标
    let y = Number(touch.pageY);

    // 滑动div距离页面高度
    let newEnergyDivOffsetTop = document.getElementById("newEnergyTabCard").offsetTop;
    // 滑动div本身高度
    let newEnergyDivHeight = document.getElementById("newEnergyTabCard").offsetHeight;

    if(y > newEnergyDivOffsetTop + newEnergyDivHeight * 0.3) {
      // this.$refs.newEnergySwipe.touchable = false;
      this.touchable = false;
    }
},
swipeClickEnd() {
    this.touchable = true;
},

版权声明:本文为ewl0116原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。