微信小程序swiper禁止用户滑动

qinnzheng（郑琴）

已于 2022-11-24 17:06:28 修改

阅读量6.7k

点赞数 2

分类专栏：小程序文章标签：微信小程序前端

于 2022-11-23 16:14:38 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36206799/article/details/128002377

版权

小程序专栏收录该内容

10 篇文章

订阅专栏

本文介绍了两种在小程序中禁止用户滑动Swiper组件的方法。方案一是在swiper-item上使用catchtouchmove事件阻止滑动，但会影响页面滚动。方案二是通过添加一个覆盖层来阻止滑动，此方法更为推荐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序中有时候我们要禁止用户滑动 swiper 组件，该怎么做呢？

方案1：（不推荐）

在 swiper-item 上加上事件 catchtouchmove 即可。
缺点：当页面需要可以滚动时，手碰到 swiper 的地方是滑不动的。

wxml代码：

<swiper
      class="swiper"
      autoplay="{{true}}"
      interval="{{3000}}"
      duration="{{1000}}"
    >
      <block wx:for="{{data}}" wx:key="index">
        <swiper-item class="swiper-item" catchtouchmove="catchTouchMove">
          <image mode="aspectFill" class="swiper-item__img" src="{{item}}" />
        </swiper-item>
      </block>
    </swiper>

ts代码：

// 禁止用户滑动
  catchTouchMove() {
    return false;
  },

方案2：（推荐）

写一个伪类，用一个蒙层盖住swiper （记得把伪类层级设置得比swiper高）

.swiper {
  position: relative;
  &:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2;
  }
}