uni-app 系统状态栏高度CSS变量--status-bar-height

最新推荐文章于 2025-02-15 02:08:16 发布

野猿新一

最新推荐文章于 2025-02-15 02:08:16 发布

阅读量5.7k

点赞数 4

文章标签： uni-app css 前端

本文链接：https://blog.csdn.net/mqdxiaoxiao/article/details/136401272

版权

文章讲述了微信小程序中的`var(--status-bar-height)`变量在取消原生导航栏后的使用技巧，以及在NVue不支持该变量时，如何通过JavaScript获取状态栏高度并动态设置占位view高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度。
当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。
目前 nvue 在 App 端，还不支持 --status-bar-height变量，替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，然后通过 style 绑定方式给占位 view 设定高度。下方提供了示例代码

<template>
	<!-- HBuilderX 2.6.3+ 新增 page-meta, 详情：https://uniapp.dcloud.io/component/page-meta -->
	<page-meta>
		<navigation-bar />
	</page-meta>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view>状态栏下的文字</view>
	</view>
</template>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>