微信小程序自定义顶部导航栏_微信小程序顶部导航栏

小程序提供的顶部导航栏字体颜色仅支持 #ffffff 和 #000000两种，因其局限性多数情况需要自定义导航栏
导航栏替换基本流程如下

1. 去掉原有小程序自带的导航栏；
2. 计算导航栏高度。避免部分页面使用自带导航栏导致高度不一致的情况；
3. 确定标题文字位置。

去掉顶部这个不太好看的黑壳壳子；

情况一：个别页面自定义
在当前页面所属的json配置文件中修改如下：

{
  "usingComponents": {},
  "navigationStyle": "custom"
}
1
2
3
4

情况二：全部页面自定义
在全局json配置文件(app.json)中修改windows参数如下(没有windows配置的手动添加)：

"window": {
    "navigationStyle": "custom"
},
1
2
3

此时效果：

获取状态栏高度

注：获取的高度单位是px

wx.getSystemInfo({
	success: res => {
		const statusBarHeight = res.statusBarHeight
	}
})
1
2
3
4
5

状态栏高度即为图中骚粉色区域高度；

导航栏高度

骚粉区域的高度再加上xie红色区域的高度就是我们自定义的导航栏高度

所有的机型导航栏高度都是状态栏高度加上44px

	const navigationHeight = statusBarHeight + 44 + 'px';
1

此时我们就找到了导航栏的高度

确定标题位置

标题和右上角的胶囊处于同一水平区域居中显示，如图黄色区域：

首先获取胶囊的位置信息（获取结果单位为px）

	const capsuleInfo = wx.getMenuButtonBoundingClientRect();
	//bottom: 胶囊底部距离屏幕顶部的距离
	//height: 胶囊高度
	//left:   胶囊左侧距离屏幕左侧的距离
	//right:  胶囊右侧距离屏幕左侧的距离
	//top:    胶囊顶部距离屏幕顶部的距离
	//width:  胶囊宽度
1
2
3
4
5
6
7

我们只需要拿到胶囊的height值和top值即可完成标题文字定位

  <view class="title" style="height:{{height}}px;top:{{top}}px;">标题</view>
1

结束

至此导航栏的替换已经完成，其它个性化样式根据自身需要调整即可。