Android自定义胶囊按钮,微信小程序自定义导航栏 胶囊菜单按钮高度适配 原理简单 赛过一些大厂的完美适配 妈妈再也不用担心我强迫症啦...

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

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

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

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

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

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

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

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

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

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

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

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