【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'}"