直接禁止滑动,使用: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 falseconst clientX2 = e.clientXlet disX = this.clientX1 - clientX2// 判断左右滑动的阀值为15if (disX > 15) {// 左滑this.currentSwiper = this.currentSwiper + 1this.clientX1 = 0}if (disX < -15) {// 右滑this.currentSwiper = this.currentSwiper - 1this.clientX1 = 0}}
}
通过这个例子,我们需要了解catchtouchmove
,touchmove.stop
。虽不常用,但是有用。