uniapp自定义导航栏/导航栏与小程序胶囊保持平行

需求：页面背景需要延伸到状态栏，如果使用自定义导航栏，导航栏会到页面最顶部，为了保证导航栏与胶囊保持同一水平线，可采用下面代码

思路：获取状态栏得高度，使用一个元素撑起来，然后再计算出导航栏得高度即可

效果：

1.page.json中给需要得界面添加自定义导航栏样式

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "首页",
		"navigationStyle": "custom"
	}
},

2.vue文件

<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>

参考：

1.【uni-app】自定义导航栏/标题栏

2.如何在uni-app中计算出微信小程序导航栏的高度