小程序自定义导航栏高度

了解导航栏高度的计算方式

我们先要知道导航栏高度是怎么组成的， 计算公式： 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度 。

获取导航栏高度

用wx.getSystemInfoSync() 获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。

const systemInfo = wx.getSystemInfoSync();

获取胶囊按钮的布局位置信息

我们用wx.getMenuButtonBoundingClientRect() 【官方文档】 获取胶囊按钮的布局位置信息

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

最后的计算

(menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight