需求
在小程序的开发过程中，经常遇到丰富小程序导航栏的需求。比如加一个回到首页的按钮、一个搜索栏，或者修改一下title样式，只有你想不到的，没有客户提不出的。好在微信官方提供了自定义导航栏的途径，然我们可以灵活应对各种需求，奥利给！ 最终的实现方式并不唯一，接下来只介绍我们项目中的实现方式。
一、导航栏配置
1.全局配置（配置后所有页面的生效）
将app.json里navigationStyle配置项设为custom。
2.局部配置(只在所配置页面生效)
在所创建页面的对应json文件里添加"navigationStyle": "custom"配置项。
二、高度及位置计算
由于在不同手机中导航栏的尺寸不一，因此我们不能将导航栏的尺寸定死，要动态计算。
1.获取右侧胶囊按钮的位置信息
通过getMenuButtonBoundingClientRect方法可以获取到右上角胶囊按钮的布局位置信息。
传送门：developers.weixin.qq.com/miniprogram…
2.计算导航栏高度
获取到右上角胶囊按钮的布局位置信息后，就可以计算导航栏的高度啦。height, top, bottom。
NavigationBarHeight = height + top + bottom
单位为px。
同理若要计算宽度。要用到width, left, right。
NavigationBarWidth = width + left + right
单位为px。
同时我们还可以知道，胶囊按钮距右侧边界的距离为right。如果你要在左侧做一个功能按钮，那这个按钮的左边距同样为right。单位为px。
3.获取状态栏高度
通过getSystemInfo方法获取到系统信息，其中statusBarHeight为状态栏高度。
三、自定义导航栏
话不多说，直接上代码
感谢阅读！
