uniapp禁止遮罩層下頁面滾動的解決方法
不少朋友在日常工作中都會遇到需要自定義彈窗的時候，當開啟彈窗后，卻發(fā)現(xiàn)存在彈窗下的頁面依舊可以被觸發(fā)滾動的問題，以下是相關的解決方法。
可用方法（不推薦）：最外層 view 設置 height 和 overflow
根據是否打開的彈窗狀態(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 官網
若需要禁止蒙版下的頁面滾動，可使用 @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() {},總結
到此這篇關于uniapp禁止遮罩層下頁面滾動的解決方法的文章就介紹到這了,更多相關uniapp禁止遮罩層頁面滾動內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了小程序模實現(xiàn)糊搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
使用純前端JavaScript實現(xiàn)Excel導入導出方法過程詳解
這篇文章主要介紹了使用純前端JavaScript實現(xiàn)Excel導入導出方法過程詳解，文章通過示例代碼和圖文解析介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
在網頁開發(fā)中我們通常使用CSS來設置網頁的樣式,但是,在開發(fā)過程中,有時候我們需要根據不同的條件來動態(tài)修改樣式,這篇文章主要介紹了通過js控制修改css變量的具體示例,需要的朋友可以參考下2025-04-04
很多網站都有登錄后才能復制的限制，什么原理呢？css屬性user-select:none，通常會采用這種方式來禁止復制文本。但瀏覽開發(fā)者工具-審查元素，取消此樣式后，就可以選中文本了。想要完整地禁止復制，還需要通過js控制選擇的內容。2023-07-07
現(xiàn)在純粹用js的人越來越少了，更多的人喜歡jquery，可使我還是喜歡javascript，下面給出一個用javascript寫的背景切換的小例子，各位大蝦不要罵，只是寫給自己看的，也供js事件的產考依據。2010-11-11
下面小編就為大家?guī)硪黄猨s阻止瀏覽器默認行為觸發(fā)的通用方法(推薦)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
Javascript ES6中對象類型Sets的介紹與使用詳解
這篇文章主要給大家介紹了關于Javascript ES6中Sets的介紹與使用的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。2017-07-07
ionic2自定義cordova插件開發(fā)以及使用（Android）
這篇文章主要為大家詳細介紹了ionic2自定義cordova插件開發(fā)以及使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了JS實現(xiàn)頭條新聞的經典輪播圖效果,涉及javascript圖片輪播切換相關實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
閉包和垃圾回收機制常常作為前端學習開發(fā)中的難點,也經常在面試中遇到這樣的問題,這篇文章主要介紹了JavaScript垃圾回收與閉包的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04