<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>
<p>在 touchmove 事件中,通过计算滑动的角度判断是左滑还是右滑,如果是左滑则阻止默认行为。需要注意的是,还需要在 swiper-item 上绑定 touchstart 事件,获取起始坐标。</p>
uniapp Swiper 禁止左滑允许右滑实现方法

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

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