微信小程序底部tabBar遮擋內(nèi)容的簡單處理方法
更新時間：2021年08月05日 11:25:43 作者：newOrange
幾乎每個app都會用到底部導航的,相對于小程序而言自然也是如此了,這篇文章主要給大家介紹了關于微信小程序底部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欄的高度，這樣可以自定義一個組件設置高度撐起底部，再有tabBar的頁面的最后引入
但是在使用webview的時候webview會充滿整個頁面導致下方填補空白失效，此時可以通過URL的query把遮擋的高度傳給webview頁面再給頁面設置padding-bottom
附：tabBar的主要屬性：
tabBar中每個item的屬性如下：
總結(jié)
到此這篇關于微信小程序底部tabBar遮擋內(nèi)容處理的文章就介紹到這了,更多相關小程序底部tabBar遮擋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了微信小程序數(shù)據(jù)存儲與取值的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
uni-app實現(xiàn)數(shù)據(jù)上拉加載更多功能實例
數(shù)據(jù)列表在很多時候,經(jīng)常會用到,下面這篇文章主要給大家介紹了關于uni-app實現(xiàn)數(shù)據(jù)上拉加載更多功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關于ES6中Set與WeakSet集合的相關資料,Set是ES6給開發(fā)者帶來的一種新的數(shù)據(jù)結(jié)構(gòu),你可以理解為值的集合,WeakSet結(jié)構(gòu)同樣不會存儲重復的值,但它的成員必須是對象類型的值,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了JsRender for object語法,以實例形式講述了for Object的用法,需要的朋友可以參考下2014-10-10
下面小編就為大家分享一篇mui框架 頁面無法滾動的解決方法(推薦)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了js實現(xiàn)防止被iframe的方法,實例分析了兩種比較常用的javascript防止頁面被iframe的技巧,非常簡單實用,需要的朋友可以參考下2015-07-07
在 Vue 3 中使用 Element Plus 的 <el-menu> 組件時,默認情況下菜單項是關閉狀態(tài)的,如果你想讓某個菜單項默認處于展開狀態(tài),你可以通過設置菜單項的 default-active 屬性來實現(xiàn),這篇文章主要介紹了element-plus默認菜單打開,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了javascript編寫貪吃蛇游戲的代碼，非常簡單，也很好玩，有需要的童鞋們可以參考下。2015-07-07
ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法分析
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法,結(jié)合實例形式簡單分析了Set與WeakSet的功能、使用方法及相關注意事項,需要的朋友可以參考下2017-03-03
JS模塊與命名空間的介紹，需要的朋友可以參考一下2013-03-03