自定义导航栏高度精确适配方案
之前自己做小程序,凡是自定义导航栏的地方,我都是 状态栏高度用 getSystemInfo 中的 statusBarHeight导航栏高度固定 44 px 不过最近发现在几款安卓较新的机型上,状态栏高度都OK,但导航栏的高度要么大了要么小了。于是我又重新研究了一下,尝试归纳目前(截至发文 2021-06-08)小程序的导航栏高度的规律,总结如下。 小程序自定义导航栏高度精确适配方案 iOS 端 状态栏高度用 getSystemInfo 中的 statusBarHeight导航栏高度固定 44 px导航栏高度 44 px 的表现效果,与默认导航栏("navigationStyle": "default")一致,但这种情况下胶囊不是上下居中的,各位需根据具体场景来自行选择方案。如果想要胶囊精确地上下居中,可使用下方 Android 端的方案Android 端 状态栏高度用 getSystemInfo 中的 statusBarHeight导航栏高度根据胶囊位置与高度计算,计算方式如下let sysInfo = wx.getSystemInfoSync();
let menuInfo = wx.getMenuButtonBoundingClientRect();
let navigationBarHeight = (menuInfo.top - sysInfo.statusBarHeight) * 2 + menuInfo.height;
按照胶囊位置计算出的导航栏高度,与默认导航栏("navigationStyle": "default")一致,且这种情况下胶囊是上下居中的 以上的方案经过多款 iOS 设备与 Android 设备的测试验证,但我们能用于测试的设备有限,得出的结论并不 100% 适用于所有设备。若有补充欢迎在评论区发言。