微信小程序swiper禁止用戶手動(dòng)滑動(dòng)代碼實(shí)例
前言
最近做一個(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js判斷頁(yè)面中是否有指定控件的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)js判斷頁(yè)面中是否有指定控件的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)秒表功能（含開(kāi)始、暫停、繼續(xù)、重置功能）
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)秒表（含開(kāi)始、暫停、繼續(xù)、重置功能）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
JavaScript markdown 編輯器實(shí)現(xiàn)雙屏同步滾動(dòng)
這篇文章主要介紹了JavaScript markdown 編輯器實(shí)現(xiàn)雙屏同步滾動(dòng)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
一般情況下我們?cè)贔LASH幻燈片字符串中有連接符時(shí)點(diǎn)擊鏈接就會(huì)不正常，造成鏈接中的參數(shù)丟失，那么就需要用encodeURIComponent來(lái)對(duì)鏈接地址進(jìn)行編碼2012-03-03
Javascript動(dòng)態(tài)創(chuàng)建div的方法
這篇文章主要介紹了Javascript動(dòng)態(tài)創(chuàng)建div的方法,是javascript節(jié)點(diǎn)操作的典型應(yīng)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
js不能跳轉(zhuǎn)到上一頁(yè)面的問(wèn)題解決方法
用JS：history.go(-1)就可以回到A頁(yè)面，如果使用Click,Change事件等激發(fā)了頁(yè)面的回傳，此時(shí)用history.go(-1)就回不到A頁(yè)面了，遇到此問(wèn)題的朋友們可以祥看本文2013-03-03
我想在頁(yè)面里把想要的關(guān)鍵詞加亮凸出(用顏色區(qū)分出來(lái))顯示,這樣讓客戶一眼能看到重的東西,然后在加亮的關(guān)鍵詞上可以加上超連接.請(qǐng)問(wèn)高手們?cè)趺磳?shí)現(xiàn)宋的功能.就像搜索引擎的那種..搜索關(guān)鍵詞的時(shí)候就顯示紅色的.2008-06-06
JS使用正則表達(dá)式實(shí)現(xiàn)關(guān)鍵字替換加粗功能示例
這篇文章主要介紹了JS使用正則表達(dá)式實(shí)現(xiàn)關(guān)鍵字替換加粗功能,涉及javascript基本正則匹配與替換操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
微信小程序如何根據(jù)不同用戶切換不同TabBar(簡(jiǎn)單易懂!)
小程序中我們可能需要根據(jù)不同的權(quán)限展示不同的tabbar,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何根據(jù)不同用戶切換不同TabBar的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了Bootstrap樹(shù)形控件使用方法，感興趣的小伙伴們可以參考一下2016-01-01