uniapp swiper-item禁止左滑滑动操作
可以通过以下方式禁止swiper-item左滑:
- 在swiper-item上绑定touchstart事件,并阻止事件冒泡和默认行为:
<swiper-item @touchstart.stop.prevent></swiper-item>
- 在swiper-item上绑定touchmove事件,并判断滑动方向,如果是向左滑动,则阻止事件冒泡和默认行为:
<swiper-item @touchmove="onTouchMove"></swiper-item>
methods: {
onTouchMove(event) {
const touch = event.touches[0];
this.direction = this.direction || getDirection(touch.clientX, touch.clientY, this.startX, this.startY);
if (this.direction === 'left') {
event.stopPropagation();
event.preventDefault();
}
},
onTouchStart(event) {
const touch = event.touches[0];
this.startX = touch.clientX;
this.startY = touch.clientY;
this.direction = '';
},
},
其中,getDirection是一个计算滑动方向的函数,可以根据需要自行实现。
注意:这种方式只是禁止了左滑,右滑仍然可以正常使用。如果需要同时禁止左右滑动,可以通过计算滑动距离来实现。
原文地址: https://www.cveoy.top/t/topic/m4P2 著作权归作者所有。请勿转载和采集!