自定义导航栏高度精确适配方案
发布于 3 年前 作者 cuina 2673 次浏览 来自 分享

之前自己做小程序,凡是自定义导航栏的地方,我都是

  • 状态栏高度用 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% 适用于所有设备。若有补充欢迎在评论区发言。

回到顶部