vue移動端彈起蒙層滑動禁止底部滑動的實現(xiàn)方法

發(fā)布時間：2020-07-22 13:39:41 來源：億速云閱讀：379 作者：小豬欄目：開發(fā)技術(shù)

這篇文章主要講解了vue移動端彈起蒙層滑動禁止底部滑動的實現(xiàn)方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

解決辦法

在蒙層彈起的時候?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);
  }
}

補充知識：解決使用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)與隱藏

看完上述內(nèi)容，是不是對vue移動端彈起蒙層滑動禁止底部滑動的實現(xiàn)方法有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

vue移動端彈起蒙層滑動禁止底部滑動的實現(xiàn)方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽