uniapp 自定义导航栏和右上角胶囊按钮对齐

<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop:statusBarHeight+'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar" :style="{ height:navBarHeight+'px' }">
				<view>导航栏标题</view>
			</view>
		</view>
		<!-- 页面内容 -->
		<view>我是页面内容</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 0,
			};
		},
		props: {

		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			console.log(this.statusBarHeight);
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			console.log(custom)

			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
			console.log("导航栏高度：" + this.navBarHeight)

			// #endif
		},
	}
</script>

<style lang="scss">
	.container{
		background: rgba(245, 247, 249, 1);
		height: 100vh;
		background-image: url("XXX")//此处可以用base64照片
		background-size: 100% 30%;
		background-repeat: no-repeat;

		.navBarBox {
			.navBar {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>