背景

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

Android、IOS手机对于页面title的展示不一致，安卓title的显示不居中页面的title只支持纯文本级别的样式控制，不能够做更丰富的title效果左上角的事件无法监听、定制路由导航单一，只能够返回上一页，深层级页面的返回不够友好

探索

小程序自定义导航栏已开放许久>>了解一下，相信不少小伙伴已使用过这个功能，同时不少小伙伴也会发现一些坑：

机型多如牛毛：自定义导航栏高度在不同机型始终无法达到视觉上的统一导航栏中内容怎么都不垂直居中对齐,更别说适配所有手机调皮的胶囊按钮：导航栏元素（文字，图标等）怎么也对不齐那该死的胶囊按钮各种尺寸的全面屏，奇怪的刘海屏，简直要抓狂

一探究竟

为了搞明白原理，我先去翻了官方文档，>>飞机，点过去是不是很惊喜，很意外，通篇大文尽然只有最下方的一张图片与这个问题有关，并且啥也看不清，汗汗汗...

我特意找了一张图片来

分析上图，我得到如下信息：

Android跟iOS有差异，表现在顶部到胶囊按钮之间的距离差了6pt胶囊按钮高度为32pt， iOS和Android一致

动手分析

我们写一个状态栏，通过wx.getSystemInfoSync().statusBarHeight设置高度

Android：

iOS:

可以看出，iOS胶囊按钮与状态栏之间距离为：4px， Android为8px，是不是所有手机都是这种情况呢？ 答案是:苹果手机确实都是4px,安卓大部分都是7和8 也会有其他的情况(可以自己打印getSystemInfo验证)如何快速便捷算出这个高度,请接着往下看

如何计算

导航栏分为状态栏和标题栏,只要能算出每台手机的导航栏高度问题就迎刃而解

导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度 注：由于胶囊按钮是原生组件，为表现一致，其单位在各种手机中都为px，所以我们自定义导航栏的单位都必需是px（切记不能用rpx），才能完美适配。

解决问题

现在我们明白了原理，可以利用胶囊按钮的位置信息和statusBarHeight高度动态计算导航栏的高度，贴一个实现此功能最重要的方法

gap信息就是不同的手机其状态栏到胶囊按钮间距，具体更多代码实现和使用demo请移步下方代码仓库，代码中还会有输入框文字跳动解决办法,安卓手机输入框文字飞出解决办法,左侧按钮边框太粗解决办法等等

吐槽

这么重要的问题，官方尽然没有提供解决方案...竟然提供了一张看不清的图片???

网上有很多ios设置44，android设置48，还有根据不同的手机型号设置不同高度，通过长时间的开发和尝试，本人发现以上方案并不完美,并且bug很多

代码库

Taro组件gitHub地址详细用法请参考README原生组件npm构建版本gitHub地址详细用法请参考README原生组件简易版gitHub地址详细用法请参考README由于本人精力有限，目前只计划发布维护好这2种组件，其他组件请自行修改代码，有问题请联系

备注

上方2种组件在最下方30多款手机测试情况表现良好iPhone手机打电话和开热点导致导航栏样式错乱，问题已经解决啦，请去demo里测试，这里特别感谢moments网友提出的问题本文章并无任何商业性质，如有侵权请联系本人修改或删除文章少量部分内容是本人查询搜集而来如有问题可以下方留言讨论，微信zhijunxh

比较

斗鱼:

虎牙:

微博:

酷狗:

知乎:

知乎是这里边做的最好的，但是我个人认为有几个可以优化的小问题

打电话或者开启热点导致样式错落，这也是大部门小程序的问题导航栏下边距太小，看起来不舒服搜索框距离2侧按钮组距离不对等自定义返回和home按钮中的竖线颜色重了，并且感觉太粗

如果您看到了此篇文章，请赶快修改自己的代码，并运用在实践中吧

扫码体验我的小程序:

创作不易，如果对你有帮助，请移步Taro组件gitHub原生组件gitHub给个星星 star✨✨ 谢谢

测试信息

| 手机型号 | 胶囊位置信息 | statusBarHeight | 测试情况 | | ---------------------- | ------------------- | :-------------: | -------- | | iPhoneX | 80 32 281 369 48 88 | 44 | 通过 | | iPhone8 plus | 56 32 320 408 24 88 | 20 | 通过 | | iphone7 | 56 32 281 368 24 87 | 20 | 通过 | | iPhone6 plus | 56 32 320 408 24 88 | 20 | 通过 | | iPhone6 | 56 32 281 368 24 87 | 20 | 通过 | | HUAWEI SLA-AL00 | 64 32 254 350 32 96 | 24 | 通过 | | HUAWEI VTR-AL00 | 64 32 254 350 32 96 | 24 | 通过 | | HUAWEI EVA-AL00 | 64 32 254 350 32 96 | 24 | 通过 | | HUAWEI EML-AL00 | 68 32 254 350 36 96 | 29 | 通过 | | HUAWEI VOG-AL00 | 65 32 254 350 33 96 | 25 | 通过 | | HUAWEI ATU-TL10 | 64 32 254 350 32 96 | 24 | 通过 | | HUAWEI SMARTISAN OS105 | 64 32 326 422 32 96 | 24 | 通过 | | XIAOMI MI6 | 59 28 265 352 31 87 | 23 | 通过 | | XIAOMI MI4LTE | 60 32 254 350 28 96 | 20 | 通过 | | XIAOMI MIX3 | 74 32 287 383 42 96 | 35 | 通过 | | REDMI NOTE3 | 64 32 254 350 32 96 | 24 | 通过 | | REDMI NOTE4 | 64 32 254 350 32 96 | 24 | 通过 | | REDMI NOTE3 | 55 28 255 351 27 96 | 20 | 通过 | | REDMI 5plus | 67 32 287 383 35 96 | 28 | 通过 | | MEIZU M571C | 65 32 254 350 33 96 | 25 | 通过 | | MEIZU M6 NOTE | 62 32 254 350 30 96 | 22 | 通过 | | MEIZU MX4 PRO | 62 32 278 374 30 96 | 22 | 通过 | | OPPO A33 | 65 32 254 350 33 96 | 26 | 通过 | | OPPO R11 | 58 32 254 350 26 96 | 18 | 通过 | | VIVO Y55 | 64 32 254 350 32 96 | 24 | 通过 | | HONOR BLN-AL20 | 64 32 254 350 32 96 | 24 | 通过 | | HONOR NEM-AL10 | 59 28 265 352 31 87 | 24 | 通过 | | HONOR BND-AL10 | 64 32 254 350 32 96 | 24 | 通过 | | HONOR duk-al20 | 64 32 254 350 32 96 | 24 | 通过 | | SAMSUNG SM-G9550 | 64 32 305 401 32 96 | 24 | 通过 | | 360 1801-A01 | 64 32 254 350 32 96 | 24 | 通过 |