uniapp swiper禁止右滑
可以通过以下方法禁止swiper组件的右滑:
- 在swiper组件上添加
@touchmove.stop.prevent事件监听器,阻止默认滑动事件的触发。
<swiper @touchmove.stop.prevent>
<!-- swiper内容 -->
</swiper>
- 在swiper组件中添加
@touchstart事件监听器,记录手指按下时的位置。
<swiper @touchstart="handleTouchStart" @touchmove.stop.prevent>
<!-- swiper内容 -->
</swiper>
export default {
data() {
return {
startX: 0
}
},
methods: {
handleTouchStart(event) {
this.startX = event.changedTouches[0].pageX
}
}
}
- 在swiper组件中添加
@touchmove事件监听器,根据手指移动的距离判断是否允许右滑,如果不允许则阻止默认滑动事件的触发。
<swiper @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchmove.stop.prevent>
<!-- swiper内容 -->
</swiper>
export default {
data() {
return {
startX: 0
}
},
methods: {
handleTouchStart(event) {
this.startX = event.changedTouches[0].pageX
},
handleTouchMove(event) {
const moveX = event.changedTouches[0].pageX - this.startX
if (moveX > 0) {
event.preventDefault()
}
}
}
}
这样就可以禁止swiper组件的右滑了。
原文地址: https://www.cveoy.top/t/topic/bx2Y 著作权归作者所有。请勿转载和采集!