【Uniapp-Vue3】获取用户状态栏高度和胶囊按钮高度
在项目目录下创建一个utils文件，并在里面创建一个system.js文件。
在system.js中配置如下代码：
const SYSTEM_INFO = uni.getSystemInfoAsync();
// 返回状态栏高度
export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;
// 返回胶囊的高度（包括距离状态栏的部分）
export const getTitleBarHeight = ()=>{
if(uni.getMenuButtonBoundingClientRect) {
let {top, height} = uni.getMenuButtonBoundingClientRect();
return height + (top - getStatusBarHeight()) * 2;
}else{
return 40;
}
}在script标签中引入：
import {getStatusBarHeight, getTitleBarHeight} from "@/utils/system.js";
我们在没有设置状态栏高度和胶囊按钮高度的时候是如下状态：
直接在标签中进行配置：
:style="{height:getStatusBarHeight()+'px'}"
:style="{height:getTitleBarHeight()+'px'}"
