微信小程序底部tabBar遮擋內容的簡單處理方法

Posted on by

微信小程序配置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 && bottom){
  let safeBottom = screenHeight - bottom
  this.setData({
    height: 48 + safeBottom
  })
}

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

附：tabBar的主要屬性：

tabBar中每個item的屬性如下：

總結

到此這篇關於微信小程序底部tabBar遮擋內容處理的文章就介紹到這瞭,更多相關小程序底部tabBar遮擋內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：