uni-app怎么修改App启动页的状态栏样式-uni-app-PHP中文网

启动页状态栏背景色必须在pages.json中通过app-plus.statusbar.background配置，且需配合navigationstyle: "custom"生效；文字颜色由navigationbartextstyle控制，内容适配用--status-bar-height。

uni-app怎么修改app启动页的状态栏样式

pages.json 里必须配 statusbar.background

App 启动页的状态栏背景色，不能靠 uni.setNavigationBarColor 动态设置——它在启动页生命周期里还没就绪，调了也无效。唯一可靠方式是直接在 pages.json 的 globalStyle 或启动页的 style 节点下，写死 app-plus.statusbar.background。

常见错误：只在页面级 style 配了 navigationStyle: "custom"，却没同步加 statusbar 配置；或者把 statusbar 写在了错误层级（比如写在 globalStyle 外面）。

全局生效（推荐用于启动页统一风格）：

"globalStyle": {
  "app-plus": {
    "statusbar": {
      "background": "#1e40af"
    }
  }
}

仅启动页生效（更灵活，适配深色/浅色启动图）：

"pages": [{
  "path": "pages/index/index",
  "style": {
    "app-plus": {
      "statusbar": {
        "background": "#0d3b66"
      }
    }
  }
}]

如果同时设了 "immersed": false，statusbar.background 会被忽略——这个字段一开，状态栏就“收进”顶部，不再渲染独立背景区域

navigationStyle 必须为 custom 才能生效

statusbar.background 不是独立开关，它依赖原生导航栏被彻底关闭。如果 navigationStyle 还是 "default" 或没配，系统会优先渲染原生导航栏，状态栏背景色要么被覆盖，要么根本不出现在启动页上。

尤其注意：启动页通常就是 pages 数组第一个页面，它的 style 必须显式声明：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

"navigationStyle": "custom"

，且和 statusbar 在同一级 style 对象里。

错误写法（statusbar 在 globalStyle，但启动页没关 navigationStyle）："navigationStyle" 缺失 → 状态栏背景不显示
错误写法（写了 "titleNView": false 但没写 "navigationStyle": "custom"）→ 原生导航栏逻辑仍存在，statusbar 配置被跳过
Android 厂商定制系统（如小米 HyperOS、OPPO ColorOS 14+）对 statusbar.background 支持较好，iOS 则严格依赖 immersed 和 navigationStyle 组合

文字颜色靠 navigationBarTextStyle 控制

启动页状态栏里的时间、信号、电量图标颜色，不由 CSS 或 background 决定，只认 navigationBarTextStyle。这个字段必须和 statusbar.background 同时存在，且值只能是 "black" 或 "white"。

别指望它响应主题切换——启动页是静态加载的，没有 data 或 computed 可绑定。想换色？得编译两套包，或在 onLaunch 里用条件编译 + plus.navigator.setStatusBarStyle 补救（但仅限 App 端，且 iOS 有延迟）。

黑底配白字：
```
"navigationBarTextStyle": "white"
```
白底配黑字：
```
"navigationBarTextStyle": "black"
```
H5 和小程序端该字段对启动页无效——它们压根不走 pages.json 的 statusbar 配置，别在这儿浪费时间

内容顶上去？用 --status-bar-height 替代 JS 获取

启动页隐藏了原生导航栏后，内容常往上偏移、遮住状态栏，或底部露白。这不是布局错，而是你用了 uni.getSystemInfoSync().statusBarHeight —— 这个值在不同平台返回不稳定（iOS 返回真实像素，Android 常固定 24px），且 H5 和小程序环境直接报错。

uni-app 在 App 端注入了可靠的 CSS 变量：--status-bar-height。直接在启动页根容器加：

padding-top: var(--status-bar-height);

别用 position: fixed + top: 0 模拟状态栏——滚动时会错位，也不适配刘海屏
如果用了 <uni-nav-bar></uni-nav-bar>，记得设 background-color="transparent"，否则默认灰色背景会挡住状态栏区域
下拉刷新时，透明导航栏会导致状态栏变黑——此时需临时禁用透明，比如用 :class="{ 'nav-transparent': !isPulling }" 配合 onPullDownRefresh 控制

启动页状态栏样式是「配置驱动」而非「代码驱动」，所有动态逻辑（比如根据深色模式切色）在启动瞬间都不可靠。最稳的方案就是 pages.json 里写死 background + textStyle，再用 CSS 变量撑开内容——其余都是给自己挖坑。