uniapp 如何隐藏顶部状态栏

在uniapp开发中，如何隐藏顶部状态栏？我尝试在pages.json中配置"navigationStyle":“custom”，但状态栏依然显示。请问正确的隐藏方法是什么？是否需要配合CSS或原生配置？希望能得到详细的解决方案。

2 回复

在 pages.json 中配置：

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  }
}

或单个页面设置：

{
  "navigationStyle": "custom"
}

注意：隐藏后需自行处理状态栏高度适配。


在 UniApp 中，可以通过以下方法隐藏顶部状态栏（包括状态栏背景和内容）：

方法一：全局配置（pages.json）

在 pages.json 的 globalStyle 或具体页面配置中设置：

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "App",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "navigationStyle": "custom"  // 隐藏整个导航栏（包括状态栏区域）
  }
}

或针对单个页面：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}

方法二：动态设置（仅限状态栏内容）

通过 API 控制状态栏显示：

// 隐藏状态栏（仅内容，背景需单独处理）
uni.hideNavigationBarLoading();

// 如需完全隐藏，需结合 navigationStyle: 'custom'

注意事项：

  1. 状态栏背景处理：设置 navigationStyle: 'custom' 后，状态栏区域会变成透明，需自行通过 CSS 适配：
    page {
  padding-top: var(--status-bar-height); /* 使用 CSS 变量适配状态栏高度 */
}
  2. 平台差异：
    • 微信小程序：部分版本可能不支持完全隐藏
    • App 端：支持最佳
    • H5：受浏览器限制

完整示例（App.vue）：

<script>
export default {
  onLaunch() {
    // APP端可调用原生方法
    #ifdef APP-PLUS
    plus.navigator.setStatusBarBackground("#000000"); // 设置状态栏背景色
    #endif
  }
}
</script>

推荐使用方法一的页面配置方式，兼容性最佳。隐藏后需自行处理页面布局，避免内容被状态栏遮挡。

回到顶部