原生导航栏不支持渐变色，必须使用自定义导航栏；需设置"navigationstyle": "custom"，通过background: linear-gradient()实现渐变，并用onpagescroll动态控制透明度与文字颜色。
原生导航栏（navigationBarBackgroundColor）在所有平台都不支持渐变色，这是硬性限制，不是配置错误。必须放弃原生方案，走自定义导航栏路线。
为什么navigationBarBackgroundColor设linear-gradient()无效
这个属性只接受十六进制、rgb/rgba等单一颜色值，底层渲染引擎根本不解析 CSS 渐变字符串。你写navigationBarBackgroundColor: "linear-gradient(to right, #ff0, #00f)"，uni-app 会静默忽略或 fallback 到默认灰。小程序端甚至可能报 Invalid backgroundColor 警告但不抛错；App 端（vue 模式）则直接无视字符串内容，用默认色顶替。
- 微信/支付宝小程序：仅支持
#RRGGBB或rgb(r,g,b)，alpha 通道都受限（rgba在部分版本被截断） - App（vue 模式）：
uni.setNavigationBarColor接收的backgroundColor参数同样只认纯色，传渐变字符串无反应 - H5：压根不走原生导航栏逻辑，该字段完全不生效
自定义导航栏必须设"navigationStyle": "custom"
这是前提，否则页面顶部仍由原生导航栏占据，你写的 <view></view> 会被顶到内容区下方，或被系统状态栏遮挡。设完后，--status-bar-height 这个 CSS 变量才可用，它是跨端计算顶部安全区的关键。
- pages.json 中对应页面节点下加：
"navigationStyle": "custom" - 不要只在某个平台条件编译里加，否则 H5 或 App 端会漏掉，导致布局错乱
- 设了 custom 后，iOS 微信里
uni.getSystemInfoSync().statusBarHeight才稳定返回非零值（某些 Android 机型仍可能返回 0，需兜底）
背景渐变必须用background: linear-gradient()而非background-image
nvue 渲染层（App 端）和部分小程序 WebView 不支持 background-image: linear-gradient() 写法，只认 background 这个 shorthand 属性。H5 端虽然两者都行，但混用容易被默认样式覆盖。
- 正确写法：
background: linear-gradient(to bottom, #4e54c8, #b0e0e6) - 禁用写法：
background-image: linear-gradient(...)（nvue 下静默失效） - 方向优先用关键词：
to bottom比180deg更稳，iOS 微信对角度解析有兼容问题 - 高度必须显式设置：
height: calc(var(--status-bar-height) + 44px)，不能靠100vh或 flex 布局撑开
滚动时动态渐变要靠onPageScroll算scrollTop
别用 onReachBottom 或 scroll-view 的 bindscroll——前者只触发底部，后者在页面级滚动中不可靠。真正能拿到实时滚动偏移的是 onPageScroll 生命周期，它每帧返回 { scrollTop: number }。
- 阈值建议设在 80–120px 区间，太小会导致 iOS 上刚滑动就满不透明，太大会让过渡不明显
- 透明度计算用：
const alpha = Math.min(1, scrollTop / 100)，再套进rgba(255,255,255,${alpha})控制背景色 - 避免高频更新：加节流（如 16ms 一次），且不要在回调里直接
this.$forceUpdate()，应合并状态后批量更新 - 文字颜色也要同步切换：用
color: ${alpha > 0.5 ? '#000' : '#fff'}防止白底白字
最易被忽略的是：iOS 微信里自定义导航栏若用了 position: fixed + 渐变，叠加 canvas 或 cover-view 元素时可能出现闪烁或断裂——这不是代码错，是 WebView 合成层级权限限制。此时只能改用双层 <view></view> 嵌套 + transform: translateY() 模拟透出效果，而不是死磕单层渐变。
