這篇文章將為大家詳細講解有關微信小程序中怎么利用tabBar遮擋內容，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
可以看出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遮擋內容就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
