【uniapp】禁止遮罩層下的頁面滾動解決辦法
不少朋友在日常工作中都會遇到需要自定義彈窗的時候，當(dāng)開啟彈窗后，卻發(fā)現(xiàn)存在彈窗下的頁面依舊可以被觸發(fā)滾動的問題，以下是相關(guān)的解決方法。
可用方法（不推薦）：最外層 view 設(shè)置 height 和 overflow
根據(jù)是否打開的彈窗狀態(tài)，對最外層 view 設(shè)置 height 和 overflow：
<!-- 頁面 view -->
<view :style="{height:isOpenCheck?'100vh':'',overflow:isOpenCheck?'hidden':''}"></view>
這個方法通過對頁面設(shè)置高度來限制底層頁面滾動的問題，但這個方法有個缺陷：頁面會回到頂部，并且下面的樣式會向上面擠壓。因此并不是很推薦這個方法。
可用方法（不是很推薦）：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) 文章來源：http://www.zghlxwxcb.cn/news/detail-466768.html
若需要禁止蒙版下的頁面滾動，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來處理 touchmove 的事件，也可以是一個空函數(shù)。將這個方法直接丟到彈窗的最外層 view 就好了，雖然在編譯器上的滾輪依舊可以滾動，但真機(jī)環(huán)境下的手指滑動無法再觸發(fā)。文章來源地址http://www.zghlxwxcb.cn/news/detail-466768.html
<!-- 彈窗 view -->
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
// js 觸發(fā)的函數(shù):置空即可
moveHandle: function() {},
到了這里，關(guān)于【uniapp】禁止遮罩層下的頁面滾動解決辦法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
