小程序自定义导航栏，实现与胶囊对齐功能

注意screenHeight屏高：屏幕高度 = 原生NavigationBar高度（含状态栏高度）+ 可使用窗口高度 + 原生TabBar高度 但是自定义导航栏screenHeight=windowHeight

由于是自定义导航栏无法获取原生NavigationBar高度，需要手动计算。 首先先获取状态栏高度和右上角胶囊的布局位置信息： 分别是uni.getSystemInfo()获取系统信息以及uni.getMenuButtonBoundingClientRect（这个函数h5环境下不能用要使用） 胶囊的顶部坐标是相对于屏幕，则由上图可知，标题栏高度 = （胶囊的顶部坐标 - 信号栏高度 ）* 2 + 胶囊高度 最终代码

data() {
          
   
			return {
          
   
				menuButtonInfo:0,//胶囊按钮信息
				statusBarHeight:0,//状态栏高度
				musicheadHeight:0
			};
},
onReady() {
          
   
			// #ifdef  MP-WEIXIN
			//获取状态栏高度
			const {
          
   	statusBarHeight,windowHeight,screenHeight }= uni.getSystemInfoSync()
			this.statusBarHeight=statusBarHeight
			// 获取胶囊按钮信息（width、height、top等）
			const {
          
   width,height,top}=uni.getMenuButtonBoundingClientRect()
			this.menuButtonInfo={
          
   width,height,top}
			// 胶囊按钮相对于离导航栏的上边距
			const topDistance=this.menuButtonInfo.top-this.statusBarHeight;
			// 计算导航栏高度
			this.musicheadHeight=this.menuButtonInfo.height+topDistance*2;
			 // #endif
		},

布局时使用status_bar占位块代替状态栏，不然后面用line-height设置标题居中有点麻烦,而且不可以使用height: var(–status-bar-height)设置状态栏高度（这个好像是固定的25px，而刘海屏已经不是25px了），必须动态设置。

<view class="musichead">
		<view class="status_bar"  :style="{
           
    height:statusBarHeight+px}"></view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="musicheadWEIXIN" :style="{
			height:musicheadHeight+px,
			line-height: musicheadHeight+px
			}">
			<!-- 左边按钮 -->
			<view class="btn" :style="{
				width:menuButtonInfo.width+px,
				height:menuButtonInfo.height+px,
				line-height:menuButtonInfo.height+px,
				top:(menuButtonInfo.top)+px
				}"
			>
				<view class="iconfont icon-zuojiantou"></view>
				<view class="split_line">|</view>
				<view class="iconfont icon-shouye"></view>
			</view>
			<!-- 标题 -->
			<text class="title">{
         
  {title}}</text>
		</view>
		<!-- #endif -->
	</view>

.musicheadWEIXIN{
          
   
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
}
.status_bar {
          
   
    // height: var(--status-bar-height);
    width: 100%;
}
.btn{
          
   
	position: absolute;
	display: flex;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	justify-content: space-around;
	border: 1px solid #dcdcdc;
	border-radius: 20px;
	left:10px;
	background-color: #fff;
	.split_line{
          
   
		color: #ffe8e8;
	}
}

最终结果