小程序自定义导航栏高度适配
iOS 端
- 状态栏高度使用wx.getSystemInfo中的statusBarHeight单位为px;
- 导航栏高度固定位44px;
- 注意:iOS端导航栏高度44与小程序默认导航栏("navgationStyle": "default")保持一致,iOS端标题与胶囊按钮并不是垂直居中的,是偏靠下一点的,而Android端是垂直居中对齐的,如果iOS也想要上下居中的效果可以采用Android端的方案;
Android 端
- 状态栏高度使用wx.getSystemInfo中的statusBarHeight单位为px;
- 导航栏的高度通过胶囊按钮的高度与距离顶部的位置计算而得:
-
// 获取系统信息 let systemInfo = wx.getSystemInfoSync(); // 获取胶囊按钮信息 let menuInfo = wx.getMenuButtonBoundingClientRect(); // 计算导航栏高度 let navBarHeight = menuInfo.height + (menuInfo.top - systemInfo.statusBarHeight) * 2;
- 根据胶囊的位置与高度计算出导航栏的高度,与Android端默认导航栏("navigationStyle": "default")保持一致,并且Android端标题与胶囊是垂直居中对齐的