快捷導(dǎo)航

uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法

更新時(shí)間：2023年09月06日 08:34:12 作者：Brod_Roy

在uniapp的開發(fā)中用過(guò)彈窗的都知道有個(gè)bug就是滑動(dòng)彈窗的內(nèi)容底部頁(yè)面也會(huì)跟著滑動(dòng),所以這篇文章主要給大家介紹了關(guān)于uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法,需要的朋友可以參考下

可用方法（不推薦）：最外層 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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: