一、核心前提：pages.json 中配置 "navigationStyle": "custom"
1. 作用本质
uni-app 页面默认会自带 原生导航栏（包含标题、返回按钮、状态栏自动适配等默认样式），这个原生导航栏样式固定（无法自定义背景色、布局结构），且会占据页面顶部固定空间。
配置 "navigationStyle": "custom" 的核心作用是：完全禁用当前页面的原生导航栏，释放页面顶部的全部布局空间，让开发者可以自由编写自定义导航栏的结构和样式，这是实现自定义导航栏的「前提条件」------ 如果不配置该属性，自定义导航栏会被原生导航栏遮挡或重叠，无法正常显示。
2. 兼容性说明
该属性是 uni-app 跨端兼容的内置配置，支持微信小程序、App（iOS/Android）、H5 等主流端，无需额外做端兼容处理，是自定义导航栏的标准开启方式。
二、页面结构：三个 view 的分工与布局原理
页面中的三个 view 各司其职，共同实现了「状态栏填充 + 导航主体 + 页面内容占位」的完整布局，是避免布局错乱的关键。
1. 第一个 view：状态栏填充容器（核心兼容机型）
复制代码
<view :style="{ height: headheight + 'px', backgroundColor: '#24B7FF', zIndex: 99, position: 'fixed', top: '0px', width: '100%' }">
</view>
核心作用
专门用于 填充手机顶部的状态栏区域（状态栏：手机顶部显示电量、信号、时间的区域）。
关键样式解析（为什么能兼容机型）
height: headheight + 'px'：高度绑定动态变量 headheight（后续会赋值为「当前机型的状态栏高度」），不同机型状态栏高度不一致（比如 iPhone 15 状态栏约 44px，iPhone 8 约 20px，安卓机型差异更大），通过动态高度适配，实现「精准填充状态栏，不遮挡、不留白」。
position: fixed：固定定位，让该容器脱离正常文档流，始终悬浮在页面最顶部，不随页面滚动移动，模拟原生导航栏的常驻效果。
top: 0px：紧贴页面最顶部，刚好对应状态栏的位置，避免状态栏区域出现空白。
backgroundColor: '#24B7FF'：与下方导航主体背景色一致，视觉上融合成一个完整的导航栏，消除割裂感。
zIndex: 99：提高层级，防止被页面其他内容遮挡。
width: 100%：全屏宽度，保证状态栏区域横向填充完整。
2. 第二个 view：自定义导航栏主体（承载核心内容）
复制代码
<view class="head" :style="{ top: headheight + 'px', backgroundColor: '#24B7FF' }">
<view>xxx</view>
</view>
核心作用
承载自定义导航栏的 实际业务内容（如城市名称、返回按钮、标题等），是导航栏的核心视觉区域。
关键样式
top: headheight + 'px'：这是「避免导航主体与状态栏重叠」的关键！导航主体的顶部距离页面顶部的高度，等于状态栏高度 headheight，刚好接在第一个状态栏填充容器的下方，形成完整的导航栏。
class="head"：绑定自定义样式类，统一控制导航主体的布局和样式。
其他样式（fixed、zIndex 等）：在 .head 类中定义，与第一个容器保持一致，确保导航主体也常驻顶部且不被遮挡。
3. 第三个 view：页面内容占位容器（解决布局错乱）
复制代码
<view style="height: 100rpx;"></view>
核心作用
弥补固定定位导致的文档流缺失问题。
原理说明
前两个 view 都使用了 position: fixed（固定定位），固定定位的元素会脱离正常文档流，不会占据页面的布局空间。如果没有这个占位容器，页面的正常内容（如下方的列表、图文等）会向上移动，与自定义导航栏重叠（因为导航栏不占文档流空间）。
该 view 的高度设置为 100rpx（与导航主体高度一致），目的是在正常文档流中占据与导航主体相同的高度，让页面正常内容从该占位容器下方开始显示，避免布局错乱。
三、script 中声明 headheight: ''：响应式数据绑定的前提
复制代码
return {
headheight: '', // 声明状态栏高度变量
}
核心作用
声明 Vue 响应式数据 ：在 Vue 实例的 data 中声明 headheight，使其成为响应式变量。这样当 headheight 的值发生变化时，模板中绑定的 :style 样式会自动更新（无需手动操作 DOM），保证导航栏样式实时同步。
模板变量预声明 ：模板中使用 headheight 绑定动态样式（height: headheight + 'px'），必须先在 data 中声明该变量，否则 Vue 会抛出「变量未定义」的警告，导致样式绑定失败。
四、onLoad 中获取状态栏高度：机型兼容的核心
复制代码
onLoad() {
const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.statusBarHeight;
this.headheight = windowHeight;
}
这是实现「跨机型兼容」的核心步骤，每一行都有明确的设计目的：
1. 为什么用 uni.getSystemInfoSync()（同步获取系统信息）
uni-app 提供了 uni.getSystemInfo（异步）和 uni.getSystemInfoSync（同步）两个 API 用于获取设备信息。
选择同步 API 的原因：onLoad 是页面加载初期的生命周期钩子，此时页面尚未完成渲染，同步 API 能「立即获取系统信息」，避免异步回调延迟导致 headheight 赋值不及时，出现导航栏先显示高度为 0、再突然更新的「样式闪烁」问题。
2. 为什么取 systemInfo.statusBarHeight
statusBarHeight 是系统信息中返回的「设备状态栏原生高度」，这是每个机型的原生属性（由手机系统决定）。
不同机型的状态栏高度差异极大（如 iPhone X 系列 44px、iPhone 8 系列 20px、安卓机型 24px/28px 等），通过动态获取该值，能让导航栏的状态栏填充容器「精准适配当前机型」，这是实现机型兼容的核心逻辑 ------ 不依赖固定的 px 值，而是依赖设备原生数据。
3. 为什么在 onLoad 周期执行
onLoad 钩子的执行时机是「页面加载完成后立即执行，页面模板渲染之前」。
在这个阶段赋值 headheight，能保证模板渲染时，headheight 已经有了正确的状态栏高度值，避免模板渲染时因 headheight 为空（初始值为 ''）导致导航栏高度为 0 的样式异常。
五、.head 样式：导航主体的布局与自适应保障
复制代码
.head {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
height: 100rpx;
width: 100%;
z-index: 99;
}
各样式属性的作用
display: flex; justify-content: center; align-items: center;：采用 Flex 布局，实现导航内容的「水平居中 + 垂直居中」，这是导航栏内容布局的常用方式，保证内容显示整齐美观。
position: fixed：与第一个状态栏容器保持一致，固定定位让导航主体常驻顶部，不随页面滚动移动。
height: 100rpx：这是 屏幕尺寸兼容 的关键！rpx 是 uni-app 内置的自适应单位，规定屏幕宽度为 750rpx，不同尺寸的手机会自动换算 rpx 对应的 px 值（如 375px 宽的手机：1rpx=0.5px；750px 宽的手机：1rpx=1px）。相比固定 px 值，使用 100rpx 能让导航主体高度在不同屏幕尺寸的手机上「视觉效果一致」，避免小屏手机导航栏过高、大屏手机导航栏过矮的问题。
width: 100%：全屏宽度，保证导航主体横向填充完整，与状态栏容器视觉统一。
z-index: 99：设置较高层级，确保导航主体不会被页面其他内容（如轮播图、列表）遮挡，保证导航栏的显示优先级。
六、整体兼容逻辑总结
这套方案能兼容各种机型的核心逻辑是「动态适配 + 布局兜底」：
禁用原生导航，释放布局空间（navigationStyle: "custom"）；
动态获取设备原生状态栏高度（statusBarHeight），让状态栏填充容器精准适配不同机型；
使用固定定位实现导航栏常驻，通过 top: headheight + 'px' 避免内容重叠；
使用 rpx 单位实现导航主体高度的屏幕自适应；
增加占位容器，弥补固定定位脱离文档流导致的布局错乱；
利用 Vue 响应式数据，保证样式实时更新，避免闪烁问题。
通过以上步骤，无论是什么机型（iOS / 安卓、刘海屏 / 非刘海屏），都能实现样式统一、布局正常的自定义头部导航栏。