uniapp刘海屏适配

新建一个js文件 getPhoneInfo.js (也可以直接写在mian.js)

export const getPhoneInfo = () => {
	const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
	let statusBarObj = {
		statusBarHeight: 20 /* 状态栏默认高度 */
		//如果自己有需要其他属性的话，可以往这里添加
	}
	// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
	statusBarObj.statusBarHeight = phoneInfo.statusBarHeight;
	return statusBarObj;
}

在mian.js挂载全局

import {getPhoneInfo} from '../getPhoneInfo.js'
Vue.prototype.getPhoneInfo = getPhoneInfo();

放在顶部导航栏

	<view :style="'height:'+getPhoneInfo.statusBarHeight*1+'px;'">
				
	</view>