navbar_height: function () {
var _this = this;
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
if(res.screenHeight - res.windowHeight - res.statusBarHeight - 32 > 72 > 40)
{
self.globalData.isFullSucreen=true;
console.log("是全面屏")
}
console.log(res);
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top,
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
let systemInfo = wx.getSystemInfoSync()
console.log(systemInfo);
let pxToRpxScale = 750 / systemInfo.windowWidth;
let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
let navigationHeight = 44 * pxToRpxScale
let ktxWindowWidth = systemInfo.windowWidth * pxToRpxScale
let ktxWindowHeight = systemInfo.windowHeight * pxToRpxScale
let ktxScreentHeight = systemInfo.screenHeight * pxToRpxScale
let tabBarHeight = ktxScreentHeight - ktxWindowHeight
let iosSABottom = Number(systemInfo.screenHeight - systemInfo.safeArea.bottom);
this.globalData.navHeight = navHeight;
this.globalData.navTop = navTop;
this.globalData.windowHeight = ktxWindowHeight;
this.globalData.tabBarHeight = tabBarHeight;
this.globalData.navigationHeight = navigationHeight;
this.globalData.iosSABottom = iosSABottom;
console.log("navHeight"+navHeight)
console.log("ktxScreentHeight"+ktxScreentHeight)
console.log("ktxWindowHeight"+ktxWindowHeight)
console.log("ktxStatusHeight"+ktxStatusHeight)
console.log("navigationHeight"+navigationHeight)
console.log("tabBarHeight"+tabBarHeight)
console.log("iosSABottom"+iosSABottom)
},
fail(err) {
console.log(err);
}
})
},
以上是我获取各种高度
你这根本不用计算这么复杂,用flex布局撑开中间内容,如果不是自定义tabbar也不用去考虑安全区域的大小,如果是自定义tabbar可以考虑做一个统一的safearea组件使用css就可以撑开安全区域。这至于顶部就是44px + statusBarHeight的大小。