uni-app 仅 app 端可通过 plus.navigator.setfullscreen(true) 隐藏状态栏,需 #ifdef app-plus 包裹、onshow 调用、pages.json 设 navigationstyle: "custom" 且 app-plus.titlenview: false;h5 和小程序端无法隐藏状态栏,仅能通过 css 变量 --status-bar-height 适配。

uni-app 无法在所有平台“去掉”状态栏,只能在 App 端隐藏它;H5 和小程序端状态栏完全由系统控制,JS 层无权移除。 尝试用 uni.setNavigationBarColor 或 navigationBarHidden 操作状态栏,基本都会失败——因为这些 API 只影响导航栏(title 区域),和状态栏(时间、信号、电池图标那条)是两套系统。
App 端必须用 plus.navigator.setFullscreen(true)
这是唯一能真正隐藏状态栏的原生调用,但有硬性前提:
- 必须包裹
#ifdef APP-PLUS,否则 H5 和小程序会报plus is not defined - 必须在
onShow或onLaunch中调用,mounted/created时机太早,plus对象还没初始化 - 页面
pages.jsonstyle 节点下必须设"navigationStyle": "custom",否则setFullscreen只作用于状态栏下方区域,顶部仍被原生导航栏占位 - 配套加
"app-plus": {"titleNView": false},否则 MIUI/HyperOS 等系统可能渲染空白 title 区,造成顶部 1px 白边或内容上移
隐藏后内容被顶上去?别信 statusBarHeight
uni.getSystemInfoSync().statusBarHeight 在 App 端返回值极不可靠:iOS 返回真实像素,Android 常固定 24/25,全面屏机型可能为 0 或错乱。更稳的方式是直接用 CSS 变量:
- 根容器写
padding-top: var(--status-bar-height); - 如果用了
<uni-nav-bar></uni-nav-bar>,记得设background-color="transparent",否则默认背景会挡住状态栏区域 - 下拉刷新时穿透透明导航栏导致状态栏变黑?用
:class="{ 'nav-transparent': !isPulling }"动态切背景色
小程序和 H5 根本不能隐藏状态栏
微信小程序连 API 都没开放——wx.setNavigationBarColor 只改导航栏背景,不影响状态栏;H5 更是完全受制于浏览器,document.documentElement.requestFullscreen() 只触发浏览器全屏,状态栏照常显示。常见错误是:
- 在小程序里写
navigationStyle: "custom"后发现首行文字被信号图标盖住 → 这不是状态栏“没隐藏”,而是它本来就不能隐藏,你只是把内容顶上去了,得手动留空:padding-top: var(--status-bar-height)(小程序支持该 CSS 变量) - 给 H5 加
viewport-fit=cover+env(safe-area-inset-top),这只是视觉模拟,非真正隐藏
真机调试时最容易忽略的点:Android 厂商系统(如小米 HyperOS、OPPO ColorOS 14+)已废弃 plus.navigator.hideSystemNavigation(),就算代码写对也无效;而 iOS 15+ 上 setFullscreen 可能静默失败,需配合 plus.navigator.setStatusBarStyle('light') 和 Info.plist 配置才能稳定生效。











