uni-app刘海屏处理_uniapp让内容不被手机刘海覆盖

前提：本次主要是解决刘海屏的问题，比如下面这种：

 1、在main.js封装一个函数（全局封装，这样子就可以在任意页面用this调用该函数）

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

2、在有需要的页面使用this.getPhoneInfo 引入

<template>
	//顶部设置一个元素高度，撑开特定高度
	<view :style="{height:statusBarHeight+'px'}"></view>
</template>
<script>
	export default {
	data() {
		return {
			/* 设定状态栏默认高度 */
			statusBarHeight:20
			}
	},
	created(){
		let statusBarObj = this.phoneInfo()
		this.statusBarHeight = statusBarObj.statusBarHeight
	},
	//计算属性：更新statusBarHeight
	computed:{
		style() {
				var statusBarHeight = this.statusBarHeight;
				return statusBarHeight;
			},
	},
</script>

总结：上面提供的是某一个场景，同时也是一种思路帮助大家解决问题，大家可以根据这种思路来解决自己实际开发中遇到的问题。这也是我最近写的一个需求