微信小程序swiper禁止用戶手動滑動

最近做一個項目，由於用到了豎向swiper，導致占用屏幕過大，用戶滑動總是滑動到swiper組件，頁面無法向下拉動，於是找各種辦法禁止用戶手動滑動swiper組件。

經過網上一番查找，網友們也是鬧洞大開，各種方法都想出來了，有用透明蒙層覆蓋的，這不失為一種很好的解決辦法，但是如果swiper上有元素需要點擊就沒有辦法了。

繼續查找，於是找到了用  catchtouchmove  事件來截獲用戶手動滑動事件，這樣既解決了禁用用戶手動滑動，有解決了有點擊按鈕不影響使用

貼代碼：

WXML:

<swiper class='yaohe' vertical='true' circular='true' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for='{{yaohe}}'>
      <swiper-item catchtouchmove='catchTouchMove'>   <!--重點這里-->
        <block wx:for='{{item}}'>
          <view class='yaohe_item'>
            <view class='yaohe_img'>
              <image src='{{item.goods_icon}}'></image>
            </view>
            <view class='yaohe_right'>
              <view class='yaohe_text'>{{item.goods_feature}}</view>
              <view class='boss_price'>
                <view class='boss'>{{item.shop_name}}</view>
                <view class='price' bindtap='goGoodsDetail' data-shop_goods_id='{{item.shop_goods_id}}'>￥{{item.goods_price}}</view>
              </view>
            </view>
          </view>
        </block>
      </swiper-item>
    </block>
  </swiper>

 

 

JS:

// 截獲豎向滑動
  catchTouchMove:function(res){
    return false
  }