navigationStyle: "custom"是跨端取消原生导航栏的唯一可靠方式，它在H5、微信小程序、App、鸿蒙全平台生效，本质是交出控制权，彻底禁用原生导航栏渲染，但需手动处理状态栏高度适配，不可与titleNView: false混用。
navigationStyle: "custom" 是跨端取消原生导航栏的唯一可靠方式
在所有平台（H5、微信小程序、App、鸿蒙）中，navigationStyle: "custom" 是真正意义上「取消原生导航栏」的配置项。它不是隐藏，而是让 uni-app 彻底不渲染原生导航视图，把控制权完全交还给页面 DOM。但注意：它一设就全端生效，不能只对 H5 有效而放过小程序——这是很多开发者踩坑的起点。
常见错误现象：pages.json 里某页加了 "navigationStyle": "custom"，H5 正常，真机调试微信小程序时，页面第一行文字被状态栏（时间/信号图标）遮住，甚至整个顶部内容不可见。
- 必须配合状态栏高度计算，否则 iOS/Android 小程序必然遮挡
- 不能和
titleNView: false混用在同一页面——后者仅作用于 H5 和 App，对小程序无效，且与navigationStyle冲突 - 全局设置写在
globalStyle，单页设置写在对应pages的style里，二者互不影响
为什么小程序里文字被顶到屏幕最顶上？
因为 navigationStyle: "custom" 后，uni-app 不再为状态栏预留空间。微信小程序默认将页面容器从 y=0 开始绘制，而系统状态栏本身占据顶部区域（通常 20–44px），导致内容被物理遮盖。
解决办法不是“猜高度”，而是实测获取：
- 在页面
onLoad中调用uni.getSystemInfoSync() - 取
statusBarHeight字段（单位 px），这是真实状态栏高度 - 若还需容纳自定义导航栏（比如高 44px 的工具栏），则总顶部间距应为
statusBarHeight + 44 - 不要硬编码
+44，部分 Android 机型或深色模式下可能为 48 或 50
示例代码片段：
export default {
data() {
return {
statusBarHeight: 0,
barHeight: 44 // 自定义导航栏高度，可按需调整
}
},
onLoad() {
const info = uni.getSystemInfoSync()
this.statusBarHeight = info.statusBarHeight
}
}
自定义导航栏模板怎么避免错位和兼容问题？
最简健壮结构是两层 view：一层占状态栏高度，一层占导航栏高度。不要试图用一个 padding-top 同时扛起两者，否则在横屏、折叠屏或鸿蒙设备上极易错位。
- 外层
<view :style="{ paddingTop: statusBarHeight + 'px' }">只负责顶出状态栏 - 紧接着放一个固定高度的
<view class="custom-nav">，高度设为barHeight，背景、文字、按钮都放这里 - 避免使用
position: fixed做导航栏——H5 下可能脱离文档流，小程序中滚动时会闪烁或错位 - 微信小程序中，
custom-nav内部按钮点击区域建议 ≥ 44px 高，符合无障碍规范
样式示例：
.custom-nav {
height: 44px;
display: flex;
align-items: center;
padding: 0 16px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
titleNView: false 和 navigationStyle 的关键区别在哪？
titleNView: false 是伪取消——它只告诉 H5/APP 层“别画原生标题”，但微信小程序根本不认这个字段；而 navigationStyle: "custom" 是真取消，所有端都执行，但代价是必须自己处理状态栏适配。
- 只做 H5 项目？用
titleNView: false更干净，无状态栏风险 - 要上小程序或 App？必须用
navigationStyle: "custom"，并主动计算statusBarHeight - 想局部关闭（比如仅首页自定义）？在
pages数组中对应路径的style里单独设"navigationStyle": "custom"，其他页保持默认 - 千万别在同一个页面 style 里同时写
titleNView: false和navigationStyle: "custom"，uni-app 会以后者为准，前者被忽略
最容易被忽略的一点：自定义导航栏后，原生的返回逻辑（如安卓物理返回键、小程序左上角返回箭头）不会自动消失。你需要手动监听 onBackPress 或在自定义按钮中调用 uni.navigateBack()。
