uniapp计算导航栏高度

动态计算导航栏高度
在 UniApp 中动态计算导航栏高度可以通过 uni.getSystemInfo 方法来实现。此方法返回的对象包含了设备的各种信息，其中包括状态栏和导航栏的高度。
// 计算导航栏高度的函数
export function getNavHeight() {
let systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度

// 不同平台可能有不同的处理方式
if (systemInfo.platform === 'android') {
return statusBarHeight + 48;
} else { // iOS 或其他平台
return statusBarHeight + 44;
}
}
登录后复制
对于更精确的控制，特别是当涉及到微信小程序时，还可以利用 uni.getMenuButtonBoundingClientRect() 来获取右上角胶囊按钮的位置信息，从而更好地适配不同型号手机上的显示效果[^4]。
function getCapsuleHeight() {
const menuButtonRect = uni.getMenuButtonBoundingClientRect();
return menuButtonRect.bottom - menuButtonRect.top;
}

// 结合两者以获得完整的顶部区域高度
function getTotalTopAreaHeight() {
const navHeight = getNavHeight();
const capsuleHeight = getCapsuleHeight();

// 返回状态栏加导航栏再加胶囊按钮的整体高度
return navHeight + capsuleHeight;
}
登录后复制
为了使页面能够响应这些尺寸变化，在 Vue 组件生命周期钩子内调用上述函数，并将结果存储到 data 属性中以便于后续使用[^1]。