navigationstyle: "custom" 是前提，pages.json 中需配置该值才能启用 --status-bar-height 变量和 uni.setstatusbarstyle；小程序不支持原生导航栏透明，app 端需用 uni.setstatusbarstyle 控制 ios 状态栏文字色，android 需平台判断；透明效果应采用背景图加渐变遮罩实现，滚动时仅动态调整渐变 alpha 值，并节流 onpagescroll、防负 scrolltop、批量更新 data。
navigationStyle: "custom" 是前提，不是结果
不设这个，后续所有操作都无效。pages.json 里对应页面的 style 节点下必须写 "navigationStyle": "custom"，否则 --status-bar-height 变量不可用，uni.setStatusBarStyle 也对状态栏文字无影响。小程序端即使写了也无效——它压根不支持原生导航栏透明，只能手写 fixed 导航栏并控制其自身透明度，和系统状态栏是两层事。
App 端状态栏文字颜色必须用 uni.setStatusBarStyle
uni.setNavigationBarColor 在 navigationStyle: "custom" 下完全不生效，它只管原生导航栏背景。而你看到的状态栏文字（时间、信号、电量）由系统独立渲染，iOS 上必须调 uni.setStatusBarStyle('light') 或 'dark' 才能切换文字颜色。Android 不支持该 API，需加平台判断：
if (uni.getSystemInfoSync().platform === 'ios') {
uni.setStatusBarStyle(navOpacity
<p>注意时机：不能只在 <code>onLoad</code> 调一次，得和滚动状态联动，在 <code>onPageScroll</code> 里根据 <code>navOpacity</code> 实时更新。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2488" title="uni-app"><img
src="https://img.php.cn/upload/manual/001/431/639/6a6029e0c4cd4231.png" alt="uni-app" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2488" title="uni-app" class="overflowclass">uni-app</a>
<p class="overflowclass">uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2488" title="uni-app" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<h3>透明度不能只靠 background-color 的 alpha</h3>
- 单纯设
background-color: rgba(255,255,255,0.3)会让文字发虚，尤其 iOS WebKit 渲染下明显 - 真正可用的是「背景图 + 渐变遮罩」组合：
background-image: url(...)拉满，再叠一层linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1))控制透出程度 - 滚动时只动态改渐变层的 alpha 值，底图保持不变，避免重绘抖动
- 如果用
<u-navbar></u-navbar>，它的background属性不接受 CSS 渐变字符串，得传对象：{ backgroundImage: 'linear-gradient(...)', backgroundSize: '100% 100%' }
滚动监听必须节流，且 scrollTop 要防负值
iOS 下拉回弹时 onPageScroll 会返回负的 scrollTop，直接用于计算会导致 opacity 变成负数或 NaN。正确写法是：
const safeTop = Math.max(0, e.scrollTop) const fadeRange = 120 const navOpacity = Math.min(1, safeTop / fadeRange)
还要加节流，不然低端安卓机滚动卡顿：
- 用
lastTime时间戳控制最小间隔 ≥16ms - 别在
onPageScroll里直接调this.$forceUpdate()或频繁setData - 合并更新：opacity、文字色、渐变层透明度用一个
data对象批量赋值
最易被忽略的一点：H5 和小程序端的 onPageScroll 触发逻辑不同。H5 默认可用；微信小程序若页面没包 <scroll-view></scroll-view>，某些 iOS 微信版本可能不触发——得在 pages.json 里确认没开 enablePullDownRefresh，否则原生下拉会劫持滚动事件。
