微信小程序自定义导航栏 胶囊菜单按钮高度完美适配_微信自定义导航栏

在自定义小程序导航栏时，右上角的胶囊（MenuButton）在不同机型测试，会发现很难适配。

实测中 不同的手机，胶囊高度不一样、状态栏高度不一样。与模拟器显示的情况是不一样的。

完全需要根据手机，动态的计算高度。

先看一些小程序顶部导航栏适配的情况

图一 某团     图二 某乎    图三 某东    图四 某拉

上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。

为解决这个问题就要搞清楚原理

这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）

而状态栏高度可以通过 wx.getSystemInfo(）获取，现在就只用解决导航栏高度了

观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的

也就是说 导航栏高度 = 胶囊高度 +（高度差）x  2

而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取，现在就只用解决高度差了

wx.getMenuButtonBoundingClientRect() 中也返回了胶囊顶部距屏幕顶部距离的信息（top）

所以知 高度差 = 胶囊顶部距屏幕顶部距离 - 状态栏高度

用这两个API 我们可以得到如下的数据

导航栏整体高度 伪呆