uni-app swiper组件禁止上下拖动但可以左右滑动

在uni-app中，swiper 组件默认支持左右滑动以及上下拖动。如果你希望禁止 swiper 组件的上下拖动，但保持其左右滑动的功能，可以通过自定义事件处理以及CSS样式调整来实现。

以下是一个示例代码，展示了如何实现这一功能：

1. 自定义组件（swiper-custom.vue）

<template>
  <view class="container">
    <swiper
      class="swiper"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      :indicator-dots="false"
      :autoplay="false"
      interval="0"
      duration="300"
    >
      <swiper-item v-for="(item, index) in items" :key="index">
        <view class="swiper-item">{{ item }}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['Slide 1', 'Slide 2', 'Slide 3'],
      startY: 0,
      startX: 0,
      deltaY: 0,
      deltaX: 0,
    };
  },
  methods: {
    onTouchStart(event) {
      this.startY = event.touches[0].clientY;
      this.startX = event.touches[0].clientX;
    },
    onTouchMove(event) {
      this.deltaY = event.touches[0].clientY - this.startY;
      this.deltaX = event.touches[0].clientX - this.startX;

      if (Math.abs(this.deltaY) > Math.abs(this.deltaX)) {
        event.preventDefault();
        event.stopPropagation();
      }
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
.swiper {
  width: 100%;
  height: 300px; /* Adjust height as needed */
}
.swiper-item {
  text-align: center;
  line-height: 300px; /* Adjust to match swiper height */
  font-size: 24px;
}
</style>

2. 使用自定义组件

在你的页面中使用这个自定义组件：

<template>
  <view>
    <swiper-custom></swiper-custom>
  </view>
</template>

<script>
import swiperCustom from '@/components/swiper-custom.vue';

export default {
  components: {
    swiperCustom,
  },
};
</script>

说明

• onTouchStart 和 onTouchMove 方法：用于记录触摸开始和移动时的坐标。
• 阻止默认行为：在 onTouchMove 方法中，通过比较 deltaY 和 deltaX 的绝对值，如果 deltaY 的绝对值大于 deltaX 的绝对值，则认为是垂直拖动，此时调用 event.preventDefault() 和 event.stopPropagation() 来阻止默认行为，从而禁止上下拖动。

这样，你就可以在uni-app中实现禁止 swiper 组件上下拖动，但允许左右滑动的功能。