彻底隐藏状态栏唯一可靠方式是plus.navigator.setfullscreen(true),需在onshow或onlaunch中调用,配合navigationstyle:"custom"和titlenview:false,并用css变量--status-bar-height布局。

uni-app怎么彻底隐藏状态栏(信号、时间、电量)
真隐藏状态栏不是“视觉遮盖”,而是让系统不渲染它——plus.navigator.setFullscreen(true) 是唯一可靠方式,其他 CSS 隐藏、navigationBarHidden 或样式类都无效。
为什么 navigationBarHidden: true 在 APP 端完全没用
这个配置只对小程序和 H5 生效,APP 端的原生导航栏和状态栏由 WebView 容器控制,navigationBarHidden 字段压根不会被解析。你看到状态栏还在,不是代码写错了,是根本没走原生逻辑。
-
navigationStyle: "custom"是前提,但只移除原生标题栏,不碰状态栏 -
titleNView: false必须配套加在"app-plus"下,否则部分 Android 机型(如小米 HyperOS)仍会留白 - 不加
#ifdef APP-PLUS包裹,H5 和小程序运行时直接报plus is not defined
调用时机不对 = 白写
plus.navigator.setFullscreen(true) 必须在 onShow 或 onLaunch 中执行,不能放 mounted、created 或 onLoad —— Vue 实例创建时 plus 环境还没初始化,调了也静默失败。
- 单页隐藏:在目标页面
onShow里调,onUnload里配setFullscreen(false)恢复 - 全应用隐藏:写在
App.vue的onLaunch,但注意横屏页需额外锁方向,否则闪屏 - 想连底部虚拟导航键一起藏?补一句
plus.navigator.hideSystemNavigation(),但别指望它在 OPPO ColorOS 14+ 或小米 HyperOS 上成功——系统已禁用该 API
内容顶上去或露白?别硬算 statusBarHeight
隐藏状态栏后页面内容上移或底部空白,不是 CSS 写得不好,而是你用了不稳定的 JS API:uni.getSystemInfoSync().statusBarHeight 在 Android 返回值常为 24/25px,全面屏机型不准,H5 和小程序甚至返回 undefined。
- 正确做法:用 uni-app 注入的 CSS 变量
--status-bar-height,写padding-top: var(--status-bar-height) - 如果用了
<uni-nav-bar></uni-nav-bar>,记得设background-color="transparent",否则默认色块会挡住状态栏区域 - 下拉刷新时穿透透明导航栏导致状态栏变黑?用
:class="{ 'nav-transparent': !isPulling }动态切背景色
真机调试必须装正式打包的 IPA/APK,HBuilderX 自带模拟器不触发原生窗口 flags,--status-bar-height 渲染也不准——测不出效果就等于没做。











