使用移动端触摸事件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版权协议,转载请附上原文出处链接和本声明。