解決辦法

在蒙層彈起的時(shí)候?qū)ody設(shè)置為fixed定位

在蒙層消失的時(shí)候?qū)ody恢復(fù)原位

popupVisible(newValue) {

if (newValue) {

document.body.style.position = 'fixed';

document.body.style.width = '100%';

document.body.style.height = '100%';

}

else {

document.body.style.position = 'static';

document.body.style.height = 'auto';

}

},

設(shè)置為fixed的時(shí)候整個(gè)頁(yè)面會(huì)恢復(fù)原位，如果需要把位置開始scrollY記下來，恢復(fù)的時(shí)候在滾到原來的位置

popupVisible(newValue) {

if (newValue) {

document.body.style.position = 'fixed';

document.body.style.width = '100%';

document.body.style.height = '100%';

this.top = window.scrollY;

}

else {

document.body.style.position = 'static';

document.body.style.height = 'auto';

window.scrollTo(0, this.top);

}

}

補(bǔ)充知識(shí)：解決使用vue時(shí)頁(yè)面內(nèi)有彈窗時(shí)禁止頁(yè)面滾動(dòng) 以及頁(yè)面內(nèi)彈窗因絕對(duì)定位導(dǎo)致頁(yè)面壓縮的問題

如下所示：

@touchmove.prevent

當(dāng)頁(yè)面彈窗出現(xiàn)時(shí)設(shè)置 @touchmove.prevent = "false";

2.頁(yè)面內(nèi)彈窗因絕對(duì)定位導(dǎo)致頁(yè)面壓縮的問題 造成底部導(dǎo)航欄固定在輸入鍵盤上面的問題

// 動(dòng)態(tài)設(shè)置背景圖的高度為瀏覽器可視區(qū)域高度

// 首先在Virtual DOM渲染數(shù)據(jù)時(shí)，設(shè)置下背景圖的高度．

this.bodyHeight = `${document.documentElement.clientHeight}`;

// 然后監(jiān)聽window的resize事件．在瀏覽器窗口變化時(shí)再設(shè)置下背景圖高度．

window.onresize = function temp() {

var bodyHeight = `${document.documentElement.clientHeight}`;

that.bodyHeight = bodyHeight;

};

通過判斷 bodyHeight 數(shù)值的變化，來控制底部導(dǎo)航欄的出現(xiàn)與隱藏

以上這篇vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的vue弹出层滑动禁止背景跟着滑动_vue移动端弹起蒙层滑动禁止底部滑动操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。