微信小程序自定义导航栏组件(完美适配全部手机),可自定义实现任何你想要的功能

背景

在作小程序时，关于默认导航栏，咱们遇到了如下的问题：

• 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高度动态计算导航栏的高度，贴一个实现此功能最重要的方法

let systemInfo = wx.getSystemInfoSync();
let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息
    wx.getMenuButtonBoundingClientRect();
    let navBarHeight = (function() { //导航栏高度
            let gap = rect.top - systemInfo.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距
            return 2 * gap + rect.height;
          })();
复制代码

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	经过