uniapp如何去掉顶部状态栏

在uniapp开发中，如何隐藏或去掉页面顶部的状态栏？我尝试过修改pages.json的配置，但似乎没有效果。希望有经验的朋友能分享一下具体的实现方法，是否需要使用原生配置或插件？

2 回复

在 pages.json 中设置当前页面或全局样式：

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "app-plus": {
      "titleView": false
    }
  }
}

或使用 uni.hideNavigationBarLoading() 隐藏状态栏。


在 UniApp 中，可以通过配置 pages.json 文件来隐藏顶部状态栏（即导航栏）。以下是具体方法：

  1. 全局隐藏状态栏： 在 pages.json 的 globalStyle 中设置：

    {
  "globalStyle": {
    "navigationBarTitleText": "你的应用名称",
    "navigationStyle": "custom"
  }
}

    "navigationStyle": "custom" 会移除默认导航栏，状态栏区域会留白（需自行处理布局）。

  2. 单页面隐藏状态栏： 在对应页面的 style 配置中添加：

    {
  "path": "pages/example/example",
  "style": {
    "navigationStyle": "custom"
  }
}

注意事项：

  • 隐藏后状态栏区域可能显示为空白，需通过 CSS 调整页面布局（例如设置 padding-top 为状态栏高度）。
  • 状态栏高度可通过 uni.getSystemInfoSync().statusBarHeight 获取（单位：px）。
  • 仅支持 APP、H5 和小程序平台，部分小程序可能不支持此配置。

示例代码调整布局：

<template>
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0
    }
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  }
}
</script>

通过以上配置即可隐藏顶部状态栏。

回到顶部