navigationStyle必须在pages.json页面对象的style内配置,不可JS动态修改;设为"custom"时需手动处理状态栏高度并忽略navigationBarTextStyle。

pages.json 中单页面配置 navigationStyle
页面级导航栏样式必须在 pages.json 里配,不能用 JS 动态改。全局配置(globalStyle)会影响所有页面,而单页配置只作用于指定路径。
常见错误是把 navigationStyle 写在 style 外层,或漏掉 "style" 包裹——它必须是页面对象的子属性。
-
"navigationStyle": "default":启用原生导航栏,支持navigationBarTitleText、navigationBarBackgroundColor等基础样式 -
"navigationStyle": "custom":完全隐藏原生导航栏,后续需手写 DOM + 适配状态栏高度 - 不写该字段时,默认为
"default",但某些平台(如鸿蒙)可能表现不一致,建议显式声明
单页面 custom 导航栏需手动处理 status-bar-height
设成 "custom" 后,页面顶部会紧贴屏幕最上沿,直接被状态栏遮挡。必须主动留出空间,否则标题/按钮会被切掉。
不能硬写 padding-top: 20px —— iPhone X+、华为全面屏、鸿蒙设备的状态栏高度各不相同。uni-app 提供了 CSS 变量 --status-bar-height,但仅在 APP-PLUS 和部分小程序平台生效;H5 下为 0,鸿蒙下可能未定义。
- 安全做法:在页面
onLoad中调用uni.getSystemInfoSync().statusBarHeight获取真实值,存入 data 或通过 class 动态绑定 - 自定义导航栏容器推荐用
position: relative+top: {{ statusBarHeight }}px,避免影响 flex 布局流 - 若使用
<uni-nav-bar>组件,它内部已处理该逻辑,但需确认其fixed属性是否开启(开启后会脱离文档流,需额外加 padding)
titleNView 配置仅限 APP-PLUS 平台生效
很多人误以为在 pages.json 里配 app-plus.titleNView 能跨平台生效,实际它只在 5+ App(iOS/Android)中起作用,H5、微信小程序、鸿蒙均无视该配置。
典型无效写法:
{
"path": "pages/detail/detail",
"style": {
"app-plus": {
"titleNView": {
"buttons": [{ "text": "分享" }]
}
}
}
}
这种写法在 HBuilder 运行到浏览器或真机鸿蒙时,按钮根本不会出现,也不会报错,容易误判为配置遗漏。
- 要实现跨平台按钮,只能走
navigationStyle: "custom"+ 自绘方案 - 若只面向 App 发布,
titleNView是更轻量的选择,且支持原生点击事件onNavigationBarButtonTap - 按钮图标建议用字体图标(如
\ue601),避免图片资源加载失败导致空白
不同平台对 navigationBarTextStyle 的兼容差异
navigationBarTextStyle 控制文字和返回图标颜色,取值只有 "black" 或 "white"。看似简单,但平台响应不一:
- 微信小程序:严格遵循,
"black"→ 黑色文字 + 黑色返回箭头,"white"→ 白色文字 + 白色箭头 - App(iOS/Android):仅影响文字颜色,返回图标始终为系统默认(通常随背景反色),无法单独控制
- 鸿蒙:实测部分版本忽略该字段,文字颜色由
navigationBarBackgroundColor对比度自动推导,强行设"white"可能无效
所以,如果你发现某平台返回图标“消失”或“看不清”,不是代码写错了,而是平台限制。此时应配合自定义导航栏统一控制所有元素颜色,而非依赖原生样式字段。
最易被忽略的一点:navigationStyle: "custom" 后,navigationBarTextStyle 完全失效——它只对 "default" 生效,这点文档没强调,但实操中常踩坑。


















