直接禁止滑动,使用:catchtouchmove参数就OK。

例子:

  <swiper-item v-for="(item,index) in examList" :key="index" catchtouchmove="false">
     content
  </swiper-item>

但是我的需求是进行人员测评,已经测评过的swiper-item允许左右滑动,没有测评过的swiper-item不允许滑动。所以我需要自定义监听左滑右滑,然后结合业务逻辑,直接进行控制就行。需要用到的属性:
touchStarttouchmove.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
	  }
	}
}

通过这个例子,我们需要了解catchtouchmovetouchmove.stop。虽不常用,但是有用。

Logo

前往低代码交流专区

更多推荐