uni-app刘海屏处理

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

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},//计算属性：更新statusBarHeightcomputed:{style() {var statusBarHeight = this.statusBarHeight;return statusBarHeight;},},
</script>

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！