uni-app隐藏状态栏唯一有效方式是APP端在onShow中调用plus.navigator.setFullscreen(true),需包裹#ifdef APP-PLUS且配套onHide中恢复false;navigationBarHidden和titleNView仅控制框架导航栏,对系统状态栏无效。

uni-app 无法直接隐藏顶部状态栏(时间、信号、电量等),必须通过 plus.navigator.setFullscreen(true) 调用原生能力,且仅对 APP 端生效;H5 和小程序平台完全不可控。
APP 端隐藏状态栏必须在 onShow 中调用 plus.navigator.setFullscreen
这个 API 是唯一有效方式,但有严格前提:
- 必须写在页面的
onShow生命周期里——mounted或onLoad都太早,plus 环境还没就绪,会报plus is not defined - 必须包裹
#ifdef APP-PLUS条件编译,否则 H5 和小程序运行时直接报错 - 只调一次不够:从全屏页跳转到其他页后,状态栏不会自动恢复,得在
onHide或onUnload里补plus.navigator.setFullscreen(false) - 示例代码:
onShow() { // #ifdef APP-PLUS if (typeof plus !== 'undefined') { plus.navigator.setFullscreen(true); } // #endif }, onHide() { // #ifdef APP-PLUS if (typeof plus !== 'undefined') { plus.navigator.setFullscreen(false); } // #endif }
为什么 navigationBarHidden 或 titleNView 对状态栏无效
这两个配置项控制的是 uni-app 自己渲染的「框架导航栏」,不是系统级的状态栏:
-
navigationBarHidden: true只影响小程序/H5 的标题区域,APP 端根本忽略该字段 -
titleNView: false仅关闭 APP/H5 的框架导航视图,状态栏仍由系统独立管理 - 误以为设了
navigationStyle: "custom"就能隐藏状态栏?错——它只移除原生导航栏,状态栏照常显示
隐藏状态栏后内容被遮挡怎么办
常见现象是页面顶部文字/图标被状态栏盖住,本质是布局没适配安全区域:
- APP 端开启
setFullscreen(true)后,页面会顶到屏幕最顶端,但状态栏高度(通常 20–44px)还在,需手动留空 - 推荐做法:给根容器加
padding-top: env(safe-area-inset-top),iOS 和部分 Android 支持该 CSS 环境变量 - 纯 CSS 方案不保险:不同机型状态栏高度不一,硬写
margin-top: 20px在刘海屏或挖孔屏上必然错位 - 若用自定义导航栏,它的
height应包含env(safe-area-inset-top),否则右侧胶囊按钮或返回键位置会偏移
真正难的不是调用那行代码,而是时机判断、条件编译包裹、退出时的状态恢复,以及内容区域与系统 UI 的边界对齐——漏掉任一环,真机上就是白屏、遮挡或闪退。


















