为什么要自定义微信小程序头部导航呢?因为不符合开发要求呗!
想要自定义头部导航栏,就要先禁用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
大家可以结合实际使用。