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

小程序中有时候我们要禁止用户滑动 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;
  }
}