欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序swiper禁止用戶手動(dòng)滑動(dòng)代碼實(shí)例

 更新時(shí)間：2019年08月23日 14:55:05   作者：kiimi  
這篇文章主要介紹了微信小程序swiper禁止用戶手動(dòng)滑動(dòng)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

最近做一個(gè)項(xiàng)目，由于用到了豎向swiper，導(dǎo)致占用屏幕過大，用戶滑動(dòng)總是滑動(dòng)到swiper組件，頁面無法向下拉動(dòng)，于是找各種辦法禁止用戶手動(dòng)滑動(dòng)swiper組件。

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

繼續(xù)查找，于是找到了用 catchtouchmove 事件來截獲用戶手動(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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論