mpvue 中控制swiper滑动,禁止滑动,只允许左滑动,不允许右滑
直接禁止滑动,使用:catchtouchmove参数就OK。例子:<swiper-item v-for="(item,index) in examList" :key="index" catchtouchmove="false">content</swiper-item>但是我的需求是进行人员测评,已经测评过的swiper-item允许左右滑动...
·
直接禁止滑动,使用:catchtouchmove
参数就OK。
例子:
<swiper-item v-for="(item,index) in examList" :key="index" catchtouchmove="false">
content
</swiper-item>
但是我的需求是进行人员测评,已经测评过的swiper-item
允许左右滑动,没有测评过的swiper-item
不允许滑动。所以我需要自定义监听左滑
、右滑
,然后结合业务逻辑,直接进行控制就行。需要用到的属性:
touchStart
,touchmove.stop
。大概的思路代码如下:
<swiper class="swiper" :current="currentSwiper" :autoplay="autoplay" :interval="interval" previous-margin="12rpx" next-margin="22rpx" :circular="circular" :duration="duration" @change="swiperChange">
<swiper-item v-for="(item,index) in examList" :key="index" @touchstart="touchStart" @touchmove.stop="touchMove">
content
</swiper-item>
</swiper>
data() {
return {
clientX1: 0, // 滑动开始位置
}
},
methods: {
touchStart (e) {
this.clientX1 = e.clientX
},
touchMove (e) {
if (this.clientX1 === 0) return false
const clientX2 = e.clientX
let disX = this.clientX1 - clientX2
// 判断左右滑动的阀值为15
if (disX > 15) {
// 左滑
this.currentSwiper = this.currentSwiper + 1
this.clientX1 = 0
}
if (disX < -15) {
// 右滑
this.currentSwiper = this.currentSwiper - 1
this.clientX1 = 0
}
}
}
通过这个例子,我们需要了解catchtouchmove
,touchmove.stop
。虽不常用,但是有用。
更多推荐
已为社区贡献21条内容
所有评论(0)