微信小程式配置tabBar之後會遮擋重要內容，而且不同機型如iPhoneX下面可能有一塊空白如下圖，比較坑的是頁面最底部空白也會顯示頁面，因此需要獲取被遮擋的高度

可以看出iPhoneX下面會多出一塊空白也會增加tabBar的遮擋內容，可以通過wx.getSystemInfoSync()獲取機型的各種資訊。

其中screenHeight是螢幕高度，safeArea的bottom屬性會自動計算安全區域也就是去除tabBar下面的空白區域後有用區域的縱座標。

如此就可以簡單計算出tabBar的高度：

const res = wx.getSystemInfoSync()
const { screenHeight,safeArea: { bottom } } = res
console.log('resHeight',res);
if (screenHeight && bo
 
ttom){
  let safeBottom = screenHeight - bottom
  this.setData({
    height: 48 + safeBottom
  })
}

其中48是我們們自定義tab欄的高度，這樣可以自定義一個元件設定高度撐起底部，再有tabBar的頁面的最後引入
但是在使用webview的時候webviewhttp://www.cppcns.com會充滿整個頁面導致下方填補空白失效，此時可以通過URL的query把遮擋的高度傳給webview頁面再給頁面設定padding-bottom

附：tabBar的主要屬性：

tabBar中每個item的屬性如下：

總結

到此這篇關於微信小程式底部tabBar遮擋內容處理的文章就介紹到這了,更多相關小程式底部tabBar遮擋內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！