uniapp如何禁止swiper组件左右滑动

在uniapp中，如何禁用swiper组件的左右滑动功能？我希望在某些条件下锁定swiper，使其无法通过手势滑动切换页面，但需要保留其他功能。尝试过设置disabled属性无效，是否有其他解决方案或需要特殊配置？

2 回复

在swiper组件中添加@touchmove.stop事件即可阻止滑动。

<swiper @touchmove.stop>
  <!-- swiper-item内容 -->
</swiper>

或者设置disable-touch属性：

<swiper disable-touch>
  <!-- swiper-item内容 -->
</swiper>

在uni-app中，禁止Swiper组件左右滑动可以通过以下方法实现：

方法一：使用 disable-touch 属性

<swiper :disable-touch="true">
  <!-- swiper-item内容 -->
</swiper>

方法二：动态控制 current 值

<template>
  <swiper 
    :current="currentIndex" 
    @change="onSwiperChange"
  >
    <swiper-item>内容1</swiper-item>
    <swiper-item>内容2</swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    onSwiperChange(e) {
      // 阻止滑动，始终保持在当前页
      this.currentIndex = e.detail.current;
    }
  }
}
</script>

方法三：使用CSS禁用触摸

<swiper class="disabled-swiper">
  <!-- swiper-item内容 -->
</swiper>

<style>
.disabled-swiper {
  touch-action: none;
  pointer-events: none;
}
</style>

推荐使用方法一，这是最直接有效的方式。如果只需要在特定条件下禁用滑动，可以结合动态绑定：

<swiper :disable-touch="isDisabled">
  <!-- swiper-item内容 -->
</swiper>

在data中控制isDisabled的值即可实现条件禁用。

回到顶部