可以通过在swiper-item上绑定touchmove事件,判断滑动的方向,如果是左滑则阻止默认行为,即不允许左滑,代码如下:

<swiper>
  <swiper-item @touchmove="swiperMove">
    <!-- swiper-item内容 -->
  </swiper-item>
</swiper>

<script>
export default {
  methods: {
    swiperMove(e) {
      const touch = e.touches[0];
      const startX = this.startX || 0;
      const startY = this.startY || 0;
      const endX = touch.clientX;
      const endY = touch.clientY;
      const dx = endX - startX;
      const dy = endY - startY;
      const angle = Math.atan2(dy, dx) * 180 / Math.PI;
      if (angle > -45 && angle < 45) {
        // 右滑
        return;
      } else if (angle > 135 || angle < -135) {
        // 左滑
        e.preventDefault();
      }
    },
    handleTouchStart(e) {
      const touch = e.touches[0];
      this.startX = touch.clientX;
      this.startY = touch.clientY;
    }
  }
}
</script>

在touchmove事件中,通过计算滑动的角度判断是左滑还是右滑,如果是左滑则阻止默认行为。需要注意的是,还需要在swiper-item上绑定touchstart事件,获取起始坐标。

uniapp中 swiper-item禁止左滑但是可以右滑

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

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