uniapp 自定义页面头部样式

1 、先将页面的头部设置成自定义

这是原来的页面

加上代码之后的页面

{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom",  这里设置成自定义
				"navigationBarTitleText": "小黄找房",
				"color": "red"
			}
		}

2、分析导航栏高度

uniapp 官网的直接添加样式会不精准，如下图状态栏 ，不采用这种

.status_bar {
			height: var(--status-bar-height); //这段代码不精准
			width: 100%;
		}

我们采用计算方式：从下图分析出来 导航栏高度 = （胶囊顶部距离 - 状态栏高度） x 2 + 胶囊的高度

3 、代码如下

红色状态栏、蓝色导航栏、绿色胶囊高度

<view :style="{'height':totalHeight +'px'}">
	<view class="" :style="{'height':statusBarHeight +'px'}" style="background-color: red;">

	</view>
	<view class="" :style="{'height':navigatorHeight +'px'}" style="background-color: blue; display: flex;
			justify-content: center;align-items: center;">
		<span class="" :style="{'height':menuHeight +'px'}"
					style="display: inline-block;background-color: chartreuse; width: 100px;">
           </span>
	</view>
</view>

//获取设备系统信息
			uni.getSystemInfo({
				success: (res) => {
					this.system = res
					console.log(this.system);
				}
			})
			// 获取胶囊信息
			this.menu = uni.getMenuButtonBoundingClientRect()

			this.statusBarHeight = this.system.statusBarHeight //状态栏高度
			this.menuHeight = this.menu.height //胶囊高度
			this.menuTop = this.menu.top //胶囊距离顶部的高度
			// 导航栏高度
			this.navigatorHeight = (this.menuTop - this.statusBarHeight) * 2 + this.menuHeight
			//总高度 = 状态栏的高度 + 导航栏高度	
			this.totalHeight = this.statusBarHeight + this.navigatorHeight