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

小程序自定义导航栏，完美适配所有手机，测试涵盖中低高端，全面屏，刘海屏各种类型手机，完美解决内容上下不居中，左右不对称，高度不协调等问题，demo提供8种类型可选择，可以自定义实现任何你想要的功能

背景

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

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请移步下方代码仓库，代码中还会有输入框文字跳动解决办法,安卓手机输入框文字飞出解决办法,左侧按钮边框太粗解决办法等等

胶囊信息报错和获取不到

问题就在于 getMenuButtonBoundingClientRect 这个方法，在某些机子和环境下会报错或者获取不到，对于此种情况完美可以模拟一个胶囊位置出来

try {   rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null;   if (rect === null) {     throw 'getMenuButtonBoundingClientRect error';   }   //取值为0的情况   if (!rect.width) {     throw 'getMenuButtonBoundingClientRect error';   } } catch (error) {   let gap = ''; //胶囊按钮上下间距 使导航内容居中   let width = 96; //胶囊的宽度，android大部分96，ios为88   if (systemInfo.platform === 'android') {     gap = 8;     width = 96;   } else if (systemInfo.platform === 'devtools') {     if (ios) {       gap = 5.5; //开发工具中ios手机     } else {       gap = 7.5; //开发工具中android和其他手机     }   } else {     gap = 4;     width = 88;   }   if (!systemInfo.statusBarHeight) {     //开启wifi的情况下修复statusBarHeight值获取不到     systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20;   }   rect = {     //获取不到胶囊信息就自定义重置一个     bottom: systemInfo.statusBarHeight + gap + 32,     height: 32,     left: systemInfo.windowWidth - width - 10,     right: systemInfo.windowWidth - 10,     top: systemInfo.statusBarHeight + gap,     width: width   };   console.log('error', error);   console.log('rect', rect); }

以上代码主要是借鉴了拼多多的默认值写法，android 机子中 gap 值大部分为 8，ios 都为 4，开发工具中 ios 为 5.5，android 为 7.5，这样处理之后自己模拟一个胶囊按钮的位置，这样在获取不到胶囊信息的情况下，可保证绝大多数机子完美显示导航头