微信小程序自定义导航栏

小程序自定义导航栏高度适配

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端标题与胶囊是垂直居中对齐的