uniapp 如何隐藏导航栏

在uniapp开发中，如何完全隐藏顶部导航栏？尝试了在pages.json里配置"navigationStyle":“custom”，但部分安卓机型仍会出现空白条。有没有兼容全平台的解决方案？或者需要通过原生方式处理？

2 回复

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


在 UniApp 中，可以通过以下几种方式隐藏导航栏（顶部标题栏）：

1. 全局配置（pages.json）

在 pages.json 的 globalStyle 或具体页面配置中设置 navigationBarTitleText 为空，并调整样式：

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#FFFFFF",
    "enablePullDownRefresh": false
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "", // 隐藏标题文字
        "navigationStyle": "custom"   // 关键：隐藏整个导航栏
      }
    }
  ]
}

2. 单页面隐藏导航栏

在具体页面的 style 中配置 "navigationStyle": "custom"：

// pages.json
{
  "pages": [
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}

3. 动态隐藏（仅限小程序）

通过 uni.hideNavigationBarLoading() 或调用页面方法（部分平台支持）：

// 在页面中调用
onLoad() {
  // 隐藏导航栏（部分平台支持）
  uni.hideHomeButton(); // 隐藏首页按钮（小程序）
}

注意事项：

  • navigationStyle: "custom" 是核心配置，但需注意：
    • 小程序中可能需要同时取消全局导航栏样式。
    • 隐藏后页面内容会顶到状态栏下，需自行用 padding-top 处理状态栏高度（通过 uni.getSystemInfoSync().statusBarHeight 获取高度）。
  • APP端 可能需在 pages.json 中配置 "app-plus": { "titleNView": false }。

示例代码调整状态栏间距：

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

<script>
export default {
  data() {
    return {
      statusBarHeight: 0
    }
  },
  onLoad() {
    // 获取状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  }
}
</script>

通过以上配置即可隐藏导航栏，并根据需要调整布局。

回到顶部