只有APP端调用plus.navigator.setFullscreen(true)并在onShow中执行才能真正隐藏系统状态栏,需加#ifdef APP-PLUS包裹,iOS生效快,Android部分机型底部导航键仍存在,且须手动处理状态栏高度预留。

不能只靠 CSS 或 pages.json 配置隐藏顶部电量信号栏(即系统状态栏),必须调用 plus.navigator.setFullscreen(true) 且时机、平台、条件缺一不可。
APP 端隐藏状态栏必须在 onShow 中调用 plus.navigator.setFullscreen
这个 API 才是真正控制原生系统状态栏显示/隐藏的入口,navigationBarHidden 或 navigationStyle: "custom" 对它完全无效——前者只管 uni-app 渲染层,后者只管原生导航栏容器。
- 必须写在页面的
onShow生命周期里,onLoad或mounted都太早,plus 环境还没就绪,会报plus is not defined - 必须包裹
#ifdef APP-PLUS,否则 H5 和小程序运行时直接崩溃 - 如果只想局部页面全屏,记得在
onHide或onUnload中调用plus.navigator.setFullscreen(false),否则跳转后其他页面也被强制全屏
全局隐藏状态栏要放在 App.vue 的 onLaunch
想整个 App 启动就隐藏顶部电量/时间/信号栏,不能写在某个页面,得进根生命周期:
- 在
App.vue的onLaunch中调用plus.navigator.setFullscreen(true) - 同样要加
#ifdef APP-PLUS包裹 - 注意:iOS 上该调用生效快;Android 部分机型(如 HyperOS)可能仅隐藏状态栏,底部虚拟导航键仍存在,这是系统限制,代码无法绕过
隐藏后内容被顶上去?状态栏高度没预留
调用 setFullscreen(true) 后,页面会“上移”覆盖原状态栏区域,但你的内容很可能被裁掉或错位——因为 DOM 还按原来布局渲染。
- 必须手动获取状态栏高度:
uni.getSystemInfoSync().statusBarHeight - 在自定义导航栏或页面最外层
<view>上加:style="{ paddingTop: statusBarHeight + 'px' }" - 如果用了
navigationStyle: "custom",还要额外加 44px(iOS)或 48px(Android)模拟原生导航栏高度,否则胶囊按钮或返回逻辑会错位 - 别信
.uni-status-bar { display: none }这类 CSS,它对原生状态栏完全无效,只是隐藏了 uni-app 自己画的一个假状态栏
微信小程序里根本没法隐藏电量信号栏
这是平台硬性限制:plus API 在小程序环境不存在,setFullscreen 无从调用,所有“隐藏状态栏”的尝试都会失败。
- 小程序只能隐藏 uni-app 原生导航栏(用
navigationBarHidden: true),但顶部系统栏(电量、时间、信号)始终可见 - 所谓“透明状态栏”只是视觉欺骗:把背景设成和状态栏一致的颜色,再用
env(safe-area-inset-top)留白,实际栏体仍在 - 不要试图用
position: fixed; top: -20px把内容往上推——会导致 iOS 安全区计算异常、下拉刷新失效、返回手势失灵
真正能干掉顶部电量信号栏的,只有 APP 端 + plus.navigator.setFullscreen(true) + 正确时机 + 正确回退逻辑。其他任何路径都是障眼法,真机一测就露馅。


















