自定义小程序导航栏（完美适配所有手机）

在创建小程序时，我们遇到了以下默认导航栏的问题：

• 安卓和IOS手机显示页面名称不一致。 Android 字幕 显示不居中
• 页面标题仅支持纯文本级别的样式控制，无法创建更丰富的字幕效果
• 无法监控和调整左上角的事件
• 路线导航简单只能返回上一页，深层次页面返回不够友好

探索

小程序自定义导航栏已经开放很久了 >> 了解更多相信很多朋友用过这个功能很多朋友也会发现一些坑：

• 机型太多：自定义导航栏的高度在不同机型上永远无法在视觉上统一
• 导航栏中的内容没有垂直对齐而且集中起来，更不用说适应所有手机了
• 顽皮的胶囊按钮：导航元素栏（文本，图标等）没有与该死的胶囊按钮对齐
• 不同尺寸的全屏，奇怪的刘海屏，它是快把我逼疯了

我们来了解一下

为了了解原理，首先我通过了官方文档>>Aircraft。我点击它并感到惊讶。我很惊讶。整篇文章中，只有底部的图片与这个问题相关，我看不清任何东西。汗汗汗...

我找到了一张特殊的图片

分析上面的图片，得到了这样的信息：

• Android和iOS之间有一个区别，体现在顶部和胶囊按钮之间有6pt的差异
• 胶囊按钮高度​​为32点，iOS和Android一致

手部分析

我们来写状态栏，使用wx.getSystemInfoSync().statusBarHeight设置高度

iOS：

是的，可以看到，iOS 胶囊按钮到状态栏的距离是：4px，Android 是 8px。这适用于所有手机吗？答案是：苹果手机实际上有4个像素，大多数安卓手机有7、8个。还有其他情况（可以打印getSystemInfo自行检查）。如何快速、方便地计算出这个高度？请阅读下文

如何计算

导航栏分为状态栏和标题栏。只要能算出每部手机导航栏的高度，问题就可以轻松解决

• 导航栏高度=胶囊按钮高度​​+状态栏到胶囊按钮的距离*2+状态栏高度

注意：由于胶囊按钮是原生组件，在不同手机中其单位都是px，以保证性能一致，所以我们自定义导航栏的单位必须是px（切记不要使用rpx）才能完美契合。

解决问题

现在我们明白原理了。我们可以利用胶囊按钮位置信息和statusBarHeight来动态计算导航栏的高度。实现这一功能最重要的方法就是向不同的手机发送间隙信息。状态栏和胶囊按钮之间的距离。有关代码实现和使用的更多示例，请参阅下面的代码存储库。该代码还将包括输入字段文本跳过的解决方法、Android 手机上文本飞出输入字段的解决方法以及左按钮边框过粗的解决方法。解决方案等

投诉

这么重要的问题，官方根本没有提供解决方案...他还提供了一张模糊的图片？？？

网上有很多ios设置44，安卓设置48还有根据不同的手机型号设置不同的高度。经过长时间的开发和实验，发现上面的方案并不完美，有很多bug，组件可以在README中找到

备注

• 下面的两个组件在底部30多部手机的测试中表现良好
• 当 iPhone 打电话并打开接入点时，导航栏的样式很混乱。问题解决了，去预览测试一下。特别感谢朋友圈网友提出的问题

作者：程峰
链接：https://juejin.im/post/5d557e2e5188255af1619716
来源：版权属于大家作者：掘金商业转载请，联系作者获取授权。非商业转载请注明出处。