uni-app如何实现特定页面导航栏隐藏其余显示-uni-app-PHP中文网

在 uni-app 中，需在 pages.json 对应页面的 style 节点下配置 navigationstyle: "custom" 隐藏原生导航栏，"default" 显示默认导航栏；必须动态获取 statusbarheight 适配顶部布局，不可硬编码或依赖 uni.hidenavigationbar。

uni-app如何实现特定页面导航栏隐藏其余显示

uni-app 中如何用 `navigationStyle` 控制单页导航栏显隐

uni-app 默认所有页面都显示原生导航栏，想只让某个页面（比如启动页、登录页、全屏海报页）隐藏，其余保持默认，不能靠全局配置——得在对应页面的 pages.json 里单独配 navigationStyle。

关键点：这个配置只对当前页面生效，且必须写在该页面的 style 节点下，不是根级 style，也不是 subNVue 或 h5 独有配置。

navigationStyle: "custom" → 完全隐藏原生导航栏，需自己用 <view></view> 模拟（注意顶部状态栏高度兼容）
navigationStyle: "default" → 显示系统默认导航栏（iOS 灰白、Android 蓝灰），无需额外处理
未声明该字段时，以 pages.json 根级 style 为准；但一旦某页面显式写了，就以该页面为准

pages.json 中单页配置示例与常见错位

错误写法是把 navigationStyle 放到根 style 或写成字符串 "none"（uni-app 不认）；正确位置是具体页面路径下的 style 内。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "default" // ← 这里生效
      }
    },
    {
      "path": "pages/login/login",
      "style": {
        "navigationStyle": "custom" // ← 登录页隐藏导航栏
      }
    }
  ],
  "style": {
    "navigationStyle": "default" // ← 这个只影响未单独配置的页面
  }
}

如果漏写 navigationBarTitleText 且用了 custom，页面顶部会空出状态栏高度但无内容，容易误以为“白屏”
H5 端设置 custom 后，uni.getSystemInfoSync().statusBarHeight 仍可取到值，但原生导航栏已不占位，需手动给容器加 padding-top
App 端 iOS 使用 custom 时，右滑返回手势可能失效，需配合 uni.navigateBack() 或自定义返回按钮

如何在 `custom` 页面安全处理状态栏高度

不同平台状态栏高度不一致（iOS 通常 44px，Android 多为 20–25px，全面屏机型还可能更高），硬编码 padding-top: 44px 必然出错。

务必用 uni.getSystemInfoSync().statusBarHeight 动态获取，注意它返回的是 px 值（非 rpx）
在 onLoad 或 onShow 中读取并赋给 data，避免首次渲染时为 0
如果页面用到了 position: fixed 的顶部元素，需额外加 top: statusBarHeight + 'px'，不能只靠 padding
微信小程序真机调试时，statusBarHeight 在某些低版本基础库中可能返回 0，建议加 fallback（如 Math.max(res.statusBarHeight, 20)）