微信小程序底部tabBar遮擋內(nèi)容的簡單處理方法
微信小程序配置tabBar之后會遮擋重要內(nèi)容，而且不同機型如iPhoneX下面可能有一塊空白如下圖，比較坑的是頁面最底部空白也會顯示頁面，因此需要獲取被遮擋的高度
可以看出iPhoneX下面會多出一塊空白也會增加tabBar的遮擋內(nèi)容，可以通過wx.getSystemInfoSync()獲取機型的各種信息。
其中screenHeight是屏幕高度，safeArea的bottom屬性會自動計算安全區(qū)域也就是去除tabBar下面的空白區(qū)域后有用區(qū)域的縱坐標。
如此就可以簡單計算出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欄的高度，這樣可以自定義一個組件設(shè)置高度撐起底部，再有tabBar的頁面的最后引入
但是在使用webview的時候webview會充滿整個頁面導(dǎo)致下方填補空白失效，此時可以通過URL的query把遮擋的高度傳給webview頁面再給頁面設(shè)置padding-bottom
附：tabBar的主要屬性：
tabBar中每個item的屬性如下：
總結(jié)
到此這篇關(guān)于微信小程序底部tabBar遮擋內(nèi)容處理的文章就介紹到這了,更多相關(guān)小程序底部tabBar遮擋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解require.js配置路徑的用法和css的引入,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要幫助大家理解javascript對象繼承，先從一個問題出發(fā)，引入javascript對象繼承相關(guān)知識，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了js 如何刪除對象里的某個屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
javascript動態(tài)判斷html元素并執(zhí)行不同的操作
在javascript中對觸發(fā)事件的元素進行判斷，然后執(zhí)行不同的操作，下面是具體的實現(xiàn)，需要的朋友可以學習下2014-06-06
微信小程序開發(fā)注意指南和優(yōu)化實踐(小結(jié))
這篇文章主要介紹了微信小程序開發(fā)注意指南和優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
JavaScript數(shù)組中相同的元素進行分組(數(shù)據(jù)聚合)groupBy函數(shù)詳解
今天在打算從js端時序數(shù)據(jù)庫TSDB中,按相同的類型的數(shù)據(jù)排在一起,并且取同一時間段最新的數(shù)據(jù),經(jīng)過查詢這種思想叫做數(shù)據(jù)聚合,就是返回的數(shù)據(jù)要根據(jù)一個屬性來做計算,這篇文章主要介紹了JavaScript數(shù)組中相同的元素進行分組(數(shù)據(jù)聚合)?groupBy函數(shù),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了js輪播圖代碼，代碼簡潔，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
微信小程序api列表匯總包括網(wǎng)絡(luò)API,媒體API,文件API ,微信小程序支付流程,位置API,界面API等
這篇文章主要介紹了微信小程序api列表匯總包括網(wǎng)絡(luò)API,媒體API,文件API ,數(shù)據(jù)API,位置API,界面API,微信小程序支付流程,微信小程序登錄流程等,需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關(guān)于在Swiper內(nèi)如何制作CSS3動畫效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)酷炫倒計時動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07