uniapp中 swiper-item禁止左滑但是可以右滑
可以通过在swiper-item上绑定touchmove事件,判断滑动的方向,如果是左滑则阻止默认行为,即不允许左滑,代码如下:
<swiper>
<swiper-item @touchmove="swiperMove">
<!-- swiper-item内容 -->
</swiper-item>
</swiper>
<script>
export default {
methods: {
swiperMove(e) {
const touch = e.touches[0];
const startX = this.startX || 0;
const startY = this.startY || 0;
const endX = touch.clientX;
const endY = touch.clientY;
const dx = endX - startX;
const dy = endY - startY;
const angle = Math.atan2(dy, dx) * 180 / Math.PI;
if (angle > -45 && angle < 45) {
// 右滑
return;
} else if (angle > 135 || angle < -135) {
// 左滑
e.preventDefault();
}
},
handleTouchStart(e) {
const touch = e.touches[0];
this.startX = touch.clientX;
this.startY = touch.clientY;
}
}
}
</script>
在touchmove事件中,通过计算滑动的角度判断是左滑还是右滑,如果是左滑则阻止默认行为。需要注意的是,还需要在swiper-item上绑定touchstart事件,获取起始坐标。
原文地址: https://www.cveoy.top/t/topic/bAC6 著作权归作者所有。请勿转载和采集!