uniapp 微信小程序自定义头部导航栏

为什么要自定义微信小程序头部导航呢？因为不符合开发要求呗！

想要自定义头部导航栏，就要先禁用uniapp自身的导航栏。

禁用有两种方法：全局配置禁用头部导航 和 选择单页面禁用头部导航。

具体配置在项目的配置文件 pages.json中进行设置，代码如下：

一、全局禁用

 二、局部禁用

配置好之后，接下来自定义我们的导航栏，首先要获取导航栏的相关数据。通过获取胶囊按钮的相关数据，来计算导航栏的相关数据。 

 如上图所示，1为状态栏高度，2为胶囊按钮的top值，3为胶囊按钮的高度

那么，我们可以将自定义的导航栏高度设置为白色部分，也就是状态栏1下面的部分。有人疑问为什么不设置为图片中整个导航栏的高度，也就是状态栏1加上下面部分。因为我们直接将导航栏设为下面部分，有利于我们将导航栏中的内容设置垂直居中。

那么，导航栏的高度计算公式为：3+（2-1）*2       

通过API     uni.getSystemInfo  来取值，具体代码如下

e.statusBarHeight得到的值为状态栏高度，再通过wx.getMenuButtonBoundingClientRect()获得胶囊按钮的相关数据，变量custom中就拿到了相关数据，custom.height为胶囊按钮的高，custom.top为胶囊按钮的top值。

红色部分是我将数据存在内存中，因为我要全局配置自定义导航栏。

绿色部分，就已经拿到了自定义导航栏的高度customBarH，并为导航栏设置padding-top值statusBarH。    注意：使用时，单位为px

大家可以结合实际使用。