前言
最近做一個項目,由于用到了豎向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 }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答