解決辦法

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

在蒙層消失的時候?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的時候整個頁面會恢復(fù)原位，如果需要把位置開始scrollY記下來，恢復(fù)的時候在滾到原來的位置

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ǔ)充知識：解決使用vue時頁面內(nèi)有彈窗時禁止頁面滾動 以及頁面內(nèi)彈窗因絕對定位導(dǎo)致頁面壓縮的問題

如下所示：

@touchmove.prevent

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

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

// 動態(tài)設(shè)置背景圖的高度為瀏覽器可視區(qū)域高度// 首先在Virtual DOM渲染數(shù)據(jù)時，設(shè)置下背景圖的高度． this.bodyHeight = `${document.documentElement.clientHeight}`;// 然后監(jiān)聽window的resize事件．在瀏覽器窗口變化時再設(shè)置下背景圖高度． window.onresize = function temp() { var bodyHeight = `${document.documentElement.clientHeight}`; that.bodyHeight = bodyHeight; };

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

以上這篇vue移動端彈起蒙層滑動禁止底部滑動操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。