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

uni-app在微信小程序上，自定义导航栏解决刘海屏的适配问题如果使用的是uni-app的自定义导航栏组件 uni-nav-bar 自定义导航栏，则设置 statusBar为true即可如果是自己写的自定义导航栏组件，解决刘海屏的适配问题，就是解决状态栏的高度问题，通过uni-app的接口来获取到当前设配的状态栏高度，并在组件中添加一个元素并设置高度为获取到的状态栏高度；<template

是大刚啊

6736人浏览 · 2021-06-28 15:51:23

是大刚啊 · 2021-06-28 15:51:23 发布

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>