【Uniapp-Vue3】获取用户状态栏高度和胶囊按钮高度

在项目目录下创建一个utils文件,并在里面创建一个system.js文件。

在system.js中配置如下代码:

javascript 复制代码
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'}"

相关推荐
@大迁世界3 分钟前
2025 年该选谁?npm vs yarn vs pnpm
前端·npm·node.js
crary,记忆4 分钟前
简介NPM 和 NPX
前端·学习·npm·node.js
wocwin5 分钟前
解决qiankun微前端Vue2+Element-ui主应用跳转到Vue3+Element-plus子应用样式冲突问题
vue.js
JianZhen✓21 分钟前
现在在本地开发了一些代码A,又有了新需求要紧急开发代码B需要只上线代码B的代码,如何更好的处理这种情况
前端
00后程序员张22 分钟前
iOS 26 App 运行状况全面解析 多工具协同监控与调试实战指南
android·ios·小程序·https·uni-app·iphone·webview
郝学胜-神的一滴41 分钟前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大1 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海1 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf
慧一居士2 小时前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴2 小时前
深入Lua包(Package)与依赖管理
前端·lua