uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法
不少朋友在日常工作中都會(huì)遇到需要自定義彈窗的時(shí)候，當(dāng)開啟彈窗后，卻發(fā)現(xiàn)存在彈窗下的頁(yè)面依舊可以被觸發(fā)滾動(dòng)的問(wèn)題，以下是相關(guān)的解決方法。
可用方法（不推薦）：最外層 view 設(shè)置 height 和 overflow
根據(jù)是否打開的彈窗狀態(tài)，對(duì)最外層 view 設(shè)置 height 和 overflow：
<!-- 頁(yè)面 view -->
<view :style="{height:isOpenCheck?'100vh':'',overflow:isOpenCheck?'hidden':''}"></view>這個(gè)方法通過(guò)對(duì)頁(yè)面設(shè)置高度來(lái)限制底層頁(yè)面滾動(dòng)的問(wèn)題，但這個(gè)方法有個(gè)缺陷：頁(yè)面會(huì)回到頂部，并且下面的樣式會(huì)向上面擠壓。因此并不是很推薦這個(gè)方法。
可用方法（不是很推薦）：catchtouchmove='moveHandle'
這個(gè)方法很獨(dú)特，它并不能直接在官方文檔里面搜到，具體原因可以看這篇：catchtouchmove這個(gè)具體是做什么的?
它其實(shí)和官方推薦的方法（下一個(gè)方法）是一樣的原理，通過(guò)阻止冒泡來(lái)實(shí)現(xiàn)禁止滑動(dòng)的效果：
<!-- 彈窗 view --> <view v-if="isOpenCheck" class="date-bg" catchtouchmove="catchTouchMove"></view>
// js 觸發(fā)的函數(shù)
catchTouchMove: function() {
return false;
},盡管這個(gè)方法可以生效，但觸發(fā)函數(shù)時(shí)會(huì)莫名生成一堆警告，所以也并不是很推薦這個(gè)方法。
可用方法（推薦）：@touchmove.stop.prevent="moveHandle"
這個(gè)方法也是官方推薦的方法：介紹 | uniapp 官網(wǎng)
若需要禁止蒙版下的頁(yè)面滾動(dòng)，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來(lái)處理 touchmove 的事件，也可以是一個(gè)空函數(shù)。將這個(gè)方法直接丟到彈窗的最外層 view 就好了，雖然在編譯器上的滾輪依舊可以滾動(dòng)，但真機(jī)環(huán)境下的手指滑動(dòng)無(wú)法再觸發(fā)。
<!-- 彈窗 view --> <view class="mask" @touchmove.stop.prevent="moveHandle"></view>
// js 觸發(fā)的函數(shù):置空即可
moveHandle: function() {},總結(jié)
到此這篇關(guān)于uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法的文章就介紹到這了,更多相關(guān)uniapp禁止遮罩層頁(yè)面滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了小程序模實(shí)現(xiàn)糊搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
使用純前端JavaScript實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出方法過(guò)程詳解
這篇文章主要介紹了使用純前端JavaScript實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出方法過(guò)程詳解，文章通過(guò)示例代碼和圖文解析介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
在網(wǎng)頁(yè)開發(fā)中我們通常使用CSS來(lái)設(shè)置網(wǎng)頁(yè)的樣式,但是,在開發(fā)過(guò)程中,有時(shí)候我們需要根據(jù)不同的條件來(lái)動(dòng)態(tài)修改樣式,這篇文章主要介紹了通過(guò)js控制修改css變量的具體示例,需要的朋友可以參考下2025-04-04
js結(jié)合css實(shí)現(xiàn)登錄后才能復(fù)制的效果實(shí)例
很多網(wǎng)站都有登錄后才能復(fù)制的限制，什么原理呢？css屬性u(píng)ser-select:none，通常會(huì)采用這種方式來(lái)禁止復(fù)制文本。但瀏覽開發(fā)者工具-審查元素，取消此樣式后，就可以選中文本了。想要完整地禁止復(fù)制，還需要通過(guò)js控制選擇的內(nèi)容。2023-07-07
現(xiàn)在純粹用js的人越來(lái)越少了，更多的人喜歡jquery，可使我還是喜歡javascript，下面給出一個(gè)用javascript寫的背景切換的小例子，各位大蝦不要罵，只是寫給自己看的，也供js事件的產(chǎn)考依據(jù)。2010-11-11
js阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)
下面小編就為大家?guī)?lái)一篇js阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
Javascript ES6中對(duì)象類型Sets的介紹與使用詳解
這篇文章主要給大家介紹了關(guān)于Javascript ES6中Sets的介紹與使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
ionic2自定義cordova插件開發(fā)以及使用（Android）
這篇文章主要為大家詳細(xì)介紹了ionic2自定義cordova插件開發(fā)以及使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JS實(shí)現(xiàn)頭條新聞的經(jīng)典輪播圖效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)頭條新聞的經(jīng)典輪播圖效果,涉及javascript圖片輪播切換相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
閉包和垃圾回收機(jī)制常常作為前端學(xué)習(xí)開發(fā)中的難點(diǎn),也經(jīng)常在面試中遇到這樣的問(wèn)題,這篇文章主要介紹了JavaScript垃圾回收與閉包的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04