App端隐藏系统状态栏必须同时满足:页面style中设"navigationStyle": "custom"和"app-plus": {"titleNView": false},再调用plus.navigator.setFullscreen(true)(仅APP-PLUS环境、onShow/onLaunch中执行)。

App端隐藏系统状态栏必须用 plus.navigator.setFullscreen(true),仅改 pages.json 或调 uni.setNavigationBarColor 都无效。
navigationStyle: "custom" 是前提,不是替代方案
很多开发者误以为设了 "navigationStyle": "custom" 就等于隐藏了状态栏——其实它只移除了原生导航栏,状态栏依然存在。不设这个,plus.navigator.setFullscreen 根本不起作用,因为控制权还在原生容器手里。
必须同时满足两个条件:
-
"navigationStyle": "custom"写在目标页面的style节点下 - 配套加上
"app-plus": { "titleNView": false },否则部分 Android 机型(如小米 HyperOS、OPPO ColorOS)会渲染空白标题区,造成顶部 1px 白边或内容上移
plus.navigator.setFullscreen(true) 的调用时机和条件
这个 API 才是真正隐藏状态栏的动作,但它极其敏感:
- 必须包裹
#ifdef APP-PLUS,否则 H5 和小程序运行时会报plus is not defined - 必须在
onShow或onLaunch中调用,不能放在mounted、created或onLoad—— Vue 生命周期早于 plus 环境就绪,提前调用静默失败 - 单次调用只影响当前页面;若需全局生效,应在
App.vue的onLaunch中调用;若只针对某页,记得在onUnload或onHide中调plus.navigator.setFullscreen(false),否则跳转后其他页也保持全屏
隐藏后内容顶上去?别信 statusBarHeight
调用 setFullscreen(true) 后,页面常出现顶部错位或底部露白。这不是 CSS 没写好,而是:uni.getSystemInfoSync().statusBarHeight 在不同平台返回值极不稳定(iOS 返回真实像素,Android 常固定 24/25,全面屏机型可能为 0),且 H5 和小程序环境直接不返回。
正确做法是依赖 uni-app 注入的 CSS 变量:
- 在根容器(如
<page></page>或最外层<view></view>)加padding-top: var(--status-bar-height); - 如果用了
<uni-nav-bar></uni-nav-bar>,必须显式设background-color="transparent",否则默认背景色会挡住状态栏区域 - 下拉刷新时内容穿透透明导航栏导致状态栏变黑?用
:class="{ 'nav-transparent': !isPulling }"动态控制背景色
安卓厂商系统限制:hideSystemNavigation 大概率失效
想连底部虚拟导航栏一起隐藏?plus.navigator.hideSystemNavigation() 在 Android 12+ 厂商系统(如小米 HyperOS、OPPO ColorOS 14+、华为鸿蒙 NEXT)上基本不可用——这是系统级限制,代码再对也没用。
真要实现“真正全屏”(状态栏 + 底部导航栏都消失),纯 JS 层已无解,必须:
- 修改
AndroidManifest.xml,添加android:theme="@style/Theme.AppCompat.NoActionBar.FullScreen" - 在
MainActivity.java中调用getWindow().getDecorView().setSystemUiVisibility(...)并启用SYSTEM_UI_FLAG_IMMERSIVE_STICKY - 或通过自定义原生插件桥接,否则 HBuilderX 默认打包无法触发沉浸式模式
最后提醒一句:iOS 15+ 上 setFullscreen 可能失效,需额外确保 Info.plist 中 UIViewControllerBasedStatusBarAppearance 设为 YES,并配合 plus.navigator.setStatusBarStyle('light') 补救。











