微信小程序自定义顶部导航并与胶囊平齐

js 

onLoad() {
				//获取系统信息， 状态栏高度为 sysInfo['statusBarHeight'];
				let sysInfo = uni.getSystemInfoSync();
				this.BarHeight = sysInfo['statusBarHeight'];	
				console.log(this.BarHeight);
			    // 胶囊信息
				let menu = uni.getMenuButtonBoundingClientRect();
			    // 导航栏高度
				let navBarHeight = (menu.top - sysInfo.statusBarHeight) * 2 + menu.height;
				this.navBarHeight = navBarHeight
				console.log(navBarHeight);
		},

html

<view :style="{'height':BarHeight+'px'}"></view>
		<view style="width: 100%;background-color: #ffffff;" :style="{'height':navBarHeight+'px'}"></view>

效果