uni-app刘海屏处理
前提:本次主要是解决刘海屏的问题,比如下面这种:1、在main.js封装一个函数(全局封装,这样子就可以在任意页面用this调用该函数)Vue.prototype.getPhoneInfo = function(){const phoneInfo = uni.getSystemInfoSync();// 获取手机系统信息let statusBarObj = {statusBarHeight: 20
·
前提:本次主要是解决刘海屏的问题,比如下面这种:
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>
总结:上面提供的是某一个场景,同时也是一种思路帮助大家解决问题,大家可以根据这种思路来解决自己实际开发中遇到的问题。
更多推荐
已为社区贡献4条内容
所有评论(0)