真正可靠的做法是关闭原生导航栏、手写 custom 导航栏，并分别控制背景透明度与文字不透明度；需配置 navigationStyle: "custom"，手动设置 padding-top、background-color: transparent，用 --status-bar-height 和 uni.setStatusBarStyle 动态适配 iOS 状态栏文字颜色。
直接设 navigationBarBackgroundColor: "transparent" 只在部分 App 端生效，且无法控制文字颜色独立于背景；真正可靠的做法是关闭原生导航栏、手写 custom 导航栏，并分别控制背景透明度与文字不透明度。
navigationStyle: "custom" 是前提，不是终点
只在 pages.json 里加 "navigationStyle": "custom" 不等于导航栏就透明了——它只是把控制权交给你，但你写的 <view class="nav"> 默认仍有背景色、默认没处理状态栏高度、默认文字颜色也不受控。
- 必须在对应页面的
pages.jsonstyle 节点下显式配置该字段，不能只靠全局或父级继承 - 页面根容器（如最外层
<view>）要加padding-top: var(--status-bar-height)，否则内容会顶进状态栏 -
<uni-nav-bar>或自定义<view>的background-color必须手动设为transparent，否则仍显示默认灰白底 - 不要在
onLoad里调uni.getSystemInfo()取状态栏高度，此时值常为 0；应直接用 CSS 变量--status-bar-height
背景透明 ≠ 文字透明：iOS 状态栏文字需单独控制
你在样式里把导航栏背景设成 transparent，但 iOS 状态栏文字（时间、信号、电量）依然按系统默认风格显示——如果背景是浅色图或白底，白色文字就直接看不见。这不是 CSS 能管的，得调 API。
- 用
uni.setStatusBarStyle("dark")切成深色文字（黑/灰），适用于亮色背景；"light"适用于深色背景 - 该 API 在 Android 无效，必须包一层判断：
if (uni.getSystemInfoSync().platform === 'ios') - 不能只在
onLoad调一次，要和滚动状态联动：比如navOpacity < 0.4且背景偏亮时，主动切 dark；滚到底部背景变深，再切回 light - 注意：该 API 不影响导航栏内自己写的文字（如标题、图标），那些由你完全控制样式
滚动渐变时保持文字清晰的关键操作
单纯对整个导航栏容器设 opacity 会让文字发虚，尤其 iOS 上字体渲染会糊；正确做法是分离控制：背景用 rgba() 或 background-image + 透明度，文字用纯色 color。
- 绑定样式示例：
:style="{ backgroundColor: 'rgba(255,255,255,' + navOpacity + ')', color: navOpacity > 0.8 ? '#333' : '#fff' }" - 若背景是图片+渐变叠加，文字颜色建议固定为高对比度色（如深灰或纯白），别随 opacity 线性变化
- 避免用
filter: opacity()或transform: translateZ(0)强制硬件加速——这反而可能触发 iOS 字体抗锯齿失效 - 小程序端无
--status-bar-height变量，需条件编译：H5 和小程序用固定值（如env('UNI_STATUS_BAR_HEIGHT', '20px')），App 端走变量
最易被忽略的是：custom 导航栏一旦启用，所有平台都失去原生 uni.setNavigationBarColor 的控制能力，连带状态栏文字也彻底脱离自动适配。这意味着你不仅要写样式，还要在 JS 里主动感知背景明暗、滚动位置、平台差异，再分别调用 setStatusBarStyle 或忽略——这个逻辑链断一环，文字就消失。
