可以通过以下方式实现禁止右滑:

  1. 在swiper-item上添加一个touchmove事件,阻止右滑操作:
<swiper-item @touchmove.stop.prevent></swiper-item>
  1. 使用uni-swiper组件的touchmove事件,在事件触发时判断当前的swiper-item是否是第一个item,如果是则阻止右滑操作:
<template>
  <view>
    <uni-swiper @touchmove="swiperTouchMove">
      <uni-swiper-item>1</uni-swiper-item>
      <uni-swiper-item>2</uni-swiper-item>
      <uni-swiper-item>3</uni-swiper-item>
    </uni-swiper>
  </view>
</template>

<script>
export default {
  methods: {
    swiperTouchMove(e) {
      const { current, source } = e.detail
      if (source === 'touch' && current === 0 && e.touches[0].clientX - this.startX > 0) {
        e.stopPropagation()
      }
    },
    swiperTouchStart(e) {
      this.startX = e.touches[0].clientX
    }
  }
}
</script>

其中,current表示当前swiper-item的下标,source表示事件来源,如果是通过touch操作触发的事件,则进行阻止操作。

uniapp中 swiper-item禁止右滑

原文地址: https://www.cveoy.top/t/topic/bAsH 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录