Uniapp 怎么隐藏导航栏

在Uniapp中隐藏导航栏有两种实现方式，具体操作如下：

场景一：单个页面隐藏导航栏

在pages.json中针对特定页面配置：

{
  "path": "pages/yourPage/yourPage",
  "style": {
    "navigationBarTitleText": "页面标题",
    "navigationStyle": "custom"  // 关键配置
  }
}

实现效果：

1. 仅当前页面隐藏导航栏
2. 页面内容会延伸到状态栏下方
3. 需手动处理状态栏占位问题（推荐使用uni.getSystemInfoSync().statusBarHeight获取高度）

场景二：全局隐藏导航栏

在pages.json的全局配置中设置：

"globalStyle": {
  "navigationStyle": "custom",  // 全局隐藏
  "navigationBarTextStyle": "black",
  "backgroundColor": "#FFFFFF"
}

注意事项：

1. 所有页面导航栏都会被隐藏
2. 若需某个页面显示导航栏，可在该页面的style中单独覆盖：

   "style": {
     "navigationStyle": "default"  // 恢复默认导航栏
   }
   

状态栏适配方案

隐藏导航栏后推荐添加占位视图：

<template>
  <view>
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- 页面内容 -->
  </view>
</template>

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

平台兼容说明

平台	支持度	注意事项
H5	✅ 完全支持	无特殊要求
微信小程序	✅ 支持	基础库需≥2.4.3
App	✅ 支持	需HBX≥2.0.3
支付宝小程序	⚠️ 部分支持	可能需单独设置transparentTitle

最佳实践：

1. 优先使用页面级配置实现单页面隐藏
2. 全局隐藏时注意检查需要保留导航栏的页面
3. 所有端均需处理状态栏占位避免内容遮挡