uniapp如何隐藏导航栏

在uniapp中如何隐藏顶部导航栏？我在开发H5页面时需要全屏显示，尝试了修改pages.json的navigationBarTitleText属性但没效果。请问正确的配置方法是什么？是否需要结合CSS样式或其他配置来实现？

2 回复

在pages.json中设置对应页面的navigationStyle为custom即可隐藏导航栏。


在 UniApp 中，可以通过以下方法隐藏导航栏：

方法一：全局配置（适用于所有页面）

在 pages.json 的 globalStyle 中设置：

{
  "globalStyle": {
    "navigationBarTitleText": "App",
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationStyle": "custom"
  }
}

将 "navigationStyle" 设置为 "custom" 即可全局隐藏导航栏。

方法二：单页面配置（仅针对特定页面）

在 pages.json 的对应页面配置中添加：

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

注意事项：

  1. 自定义导航栏：隐藏导航栏后，页面内容会延伸到状态栏区域，需要自行处理状态栏高度适配。
  2. 状态栏高度获取：
    // 在 Vue 中
export default {
  data() {
    return {
      statusBarHeight: 0
    }
  },
  onLoad() {
    // 获取状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
  }
}
  3. CSS 适配：
    .custom-page {
  padding-top: var(--status-bar-height); /* 使用 CSS 变量 */
}

适用场景：

  • 需要全屏展示内容（如游戏、视频播放器）
  • 自定义顶部栏设计
  • 沉浸式体验需求

隐藏导航栏后，建议通过 CSS 调整页面布局，避免内容被状态栏遮挡。

回到顶部