您好,欢迎来到年旅网。
搜索
您的当前位置:首页Vant-Swipe轮播组件控制可滑动区域范围

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;
},

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- oldu.cn 版权所有 浙ICP备2024123271号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务