小程序自定义导航栏高度计算

自定义导航栏

在 app.json 里面把 “navigationStyle” 设置为 “custom”

或

页面json中 “navigationStyle”: “custom”

自定义导航栏后页面就成了全屏状态，如果还要自定义导航栏，那么就需要重新计算导航栏的高度，让其一直 fixed 在头部。其计算如下：

 // 获取状态栏高度
 const { statusBarHeight } = wx.getSystemInfoSync();
 
 // 得到右上角菜单的位置尺寸
const menuButtonObject = wx.getMenuButtonBoundingClientRect();
const { top, height } = menuButtonObject;
 
// 计算导航栏的高度
// 此高度基于右上角菜单在导航栏位置垂直居中计算得到
const navBarHeight = height + (top - statusBarHeight) * 2;
 
// 计算状态栏与导航栏的总高度
const statusNavBarHeight = statusBarHeight + navBarHeight;