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