uni-app解决自定义导航栏，刘海屏的适配问题

uni-app在微信小程序上，自定义导航栏解决刘海屏的适配问题

• uniapp中微信小程序自定义导航栏完美适配手机,也能解决刘海屏的问题
• 在微信小程序端最主要的两个接口 uni.getSystemInfoSync() 和uni.getMenuButtonBoundingClientRect()
• 下面直接看代码

<template>
	<view class="content">
		<!-- 这里是状态栏 -->
		<view class="status_bar" :style="{height:statusBarHeight+'px'}">
			
		</view>
		<!-- 标题栏 -->
		<view class="title" :style="{height:titleBarHeight+'px'}"> 标题栏 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				titleBarHeight: 0
			}
		},
		onLoad() {
			// 
			let systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
		},
		methods: {

		}

	}
</script>

<style>
	.status_bar {
		width: 100%;
		background-color: yellow;
	}
	.title{
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #26a1ff;
		
	}
</style>