前言
最近做一個(gè)項(xiàng)目，由于用到了豎向swiper，導(dǎo)致占用屏幕過(guò)大，用戶滑動(dòng)總是滑動(dòng)到swiper組件，頁(yè)面無(wú)法向下拉動(dòng)，于是找各種辦法禁止用戶手動(dòng)滑動(dòng)swiper組件。
經(jīng)過(guò)網(wǎng)上一番查找，網(wǎng)友們也是鬧洞大開(kāi)，各種方法都想出來(lái)了，有用透明蒙層覆蓋的，這不失為一種很好的解決辦法，但是如果swiper上有元素需要點(diǎn)擊就沒(méi)有辦法了。
繼續(xù)查找，于是找到了用 catchtouchmove 事件來(lái)截獲用戶手動(dòng)滑動(dòng)事件，這樣既解決了禁用用戶手動(dòng)滑動(dòng)，有解決了有點(diǎn)擊按鈕不影響使用
代碼：
WXML:
<swiper class='yaohe' vertical='true' circular='true' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for='{{yaohe}}'> <swiper-item catchtouchmove='catchTouchMove'> <!--重點(diǎn)這里--> <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:
// 截獲豎向滑動(dòng) catchTouchMove:function(res){ return false }以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
