uniapp禁止遮罩層下頁面滾動的解決方法
不少朋友在日常工作中都會遇到需要自定義彈窗的時候，當開啟彈窗后，卻發(fā)現(xiàn)存在彈窗下的頁面依舊可以被觸發(fā)滾動的問題，以下是相關的解決方法。
可用方法（不推薦）：最外層 view 設置 height 和 overflow
根據(jù)是否打開的彈窗狀態(tài)，對最外層 view 設置 height 和 overflow：
<!-- 頁面 view -->
<view :style="{height:isOpenCheck?'100vh':'',overflow:isOpenCheck?'hidden':''}"></view>這個方法通過對頁面設置高度來限制底層頁面滾動的問題，但這個方法有個缺陷：頁面會回到頂部，并且下面的樣式會向上面擠壓。因此并不是很推薦這個方法。
可用方法（不是很推薦）：catchtouchmove='moveHandle'
這個方法很獨特，它并不能直接在官方文檔里面搜到，具體原因可以看這篇：catchtouchmove這個具體是做什么的?
它其實和官方推薦的方法（下一個方法）是一樣的原理，通過阻止冒泡來實現(xiàn)禁止滑動的效果：
<!-- 彈窗 view --> <view v-if="isOpenCheck" class="date-bg" catchtouchmove="catchTouchMove"></view>
// js 觸發(fā)的函數(shù)
catchTouchMove: function() {
return false;
},盡管這個方法可以生效，但觸發(fā)函數(shù)時會莫名生成一堆警告，所以也并不是很推薦這個方法。
可用方法（推薦）：@touchmove.stop.prevent="moveHandle"
這個方法也是官方推薦的方法：介紹 | uniapp 官網(wǎng)
若需要禁止蒙版下的頁面滾動，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來處理 touchmove 的事件，也可以是一個空函數(shù)。將這個方法直接丟到彈窗的最外層 view 就好了，雖然在編譯器上的滾輪依舊可以滾動，但真機環(huán)境下的手指滑動無法再觸發(fā)。
<!-- 彈窗 view --> <view class="mask" @touchmove.stop.prevent="moveHandle"></view>
// js 觸發(fā)的函數(shù):置空即可
moveHandle: function() {},總結(jié)
到此這篇關于uniapp禁止遮罩層下頁面滾動的解決方法的文章就介紹到這了,更多相關uniapp禁止遮罩層頁面滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了微信APP生命周期及頁面生命周期當然示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
這篇文章主要介紹了記錄一次開發(fā)微信網(wǎng)頁分享的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
javascript 彈出的窗口返回值給父窗口具體實現(xiàn)
這篇文章主要介紹了javascript 彈出的窗口返回值給父窗口具體實現(xiàn)，有需要的朋友可以參考一下2013-11-11
在數(shù)組中有兩個可以用來直接排序的方法，分別是reverse（）和sort（）。下面通過本文給大家詳細介紹，對js 數(shù)組重排序相關知識感興趣的朋友一起看看吧2016-11-11
前端開發(fā)，要學會吝嗇:2010-04-04
async/await讓異步操作同步執(zhí)行的方法詳解
這篇文章主要給大家介紹了關于async/await讓異步操作同步執(zhí)行的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用async/await具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-11-11
可能很多朋友認為undefined是在js中未定義變量時才會提示的錯誤,其實不然undefined 是js中的一特殊的變量,我們也可以提前定義哦,下面這篇文章主要給大家介紹了關于js中undefined該怎么判斷的相關資料,需要的朋友可以參考下2023-04-04
JavaScript語法高亮插件highlight.js用法詳解【附highlight.js本站下載】
這篇文章主要介紹了JavaScript語法高亮庫highlight.js用法,詳細分析了highlight.js的下載、調(diào)用及具體使用技巧,需要的朋友可以參考下2016-11-11
JS實現(xiàn)選項卡插件的兩種寫法（jQuery和class）
這篇文章主要為大家詳細介紹了JS實現(xiàn)選項卡插件的兩種寫法：jQuery和class，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細介紹了移動端觸摸滑動插件swiper的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08