onPageScroll中通过参数e.scrollTop读取滚动位置，单位px、恒为正，仅在页面级Vue实例中有效；需注意三端兼容性与节流限制。
onPageScroll 里怎么读取滚动位置
必须在页面级组件（pages.json 注册的 .vue 文件）中使用 onPageScroll，子组件无法直接监听。它每帧返回一个对象：{ scrollTop: number }，单位是 px，从 0 开始递增。注意：小程序端若页面根节点没包 scroll-view，iOS 微信可能不触发；H5 和 App 端默认可用，但安卓真机存在节流（约 16–60ms 一次），别指望毫秒级精度。
常见错误是把它写在组件 methods 里或用 onReachBottom 替代——后者只在触底时触发，完全没法映射滑动进度。
状态栏透明度怎么和 scrollTop 联动
状态栏本身不能设 opacity，真正可控的是自定义导航栏容器（<view class="nav">）的背景色透明度，以及 iOS 状态栏文字颜色。关键不是“让状态栏变透明”，而是让导航栏视觉上渐隐，同时系统状态栏文字可读：
- 用
scrollTop计算归一化值，比如阈值设为 80px：const navBgAlpha = Math.min(1, scrollTop / 80) - 导航栏背景用
rgba(255, 255, 255, ${navBgAlpha})或 CSS 变量绑定：:style="{ backgroundColor: `rgba(255, 255, 255, ${navBgAlpha})` }" - iOS 必须同步调
uni.setStatusBarStyle(navBgAlpha ，否则浅色背景配白色文字就看不见；Android 不支持该 API，要加平台判断 - 别直接给整个导航栏设
opacity——会导致内部按钮、图标也发虚，尤其 iOS 上渲染异常明显
为什么 custom 导航栏下 status-bar-height 有时取不到
--status-bar-height 是 uni-app 在 App 端注入的 CSS 运行时变量，仅在 navigationStyle: "custom" 且 pages.json 配置生效后才可用。常见失效原因：
- 在
onLoad阶段就读取getComputedStyle(...).getPropertyValue('--status-bar-height')—— 此时 DOM 未就绪，返回空字符串 - 没在 pages.json 对应页面 style 中显式配置
"navigationStyle": "custom"，或漏写了"titleNView": false（App 端必须关掉原生标题栏，custom 才真正接管） - H5 或小程序环境本就不支持该变量，
var(--status-bar-height)会退化为 0，需条件编译或 fallback 处理 - 真机调试用了 HBuilderX 模拟器——它对状态栏渲染有偏差，必须用正式打包的 IPA/APK 测试
下拉刷新时状态栏突然变黑或闪烁怎么办
这是原生 webview 下拉机制导致的叠加顺序问题：开启 "enablePullDownRefresh": true 后，整个 webview 被拖动，透明导航栏下的内容顶入状态栏区域，Android 渲染层容易错乱。
根本解法不是修样式，而是行为隔离：
- 加响应式 class：
:class="{ 'nav-transparent': !isPulling }" - 在
onPullDownRefresh中设isPulling = true，临时关闭透明效果（比如背景色切回 solid white） - 在
stopPullDownRefresh后设isPulling = false，恢复渐变逻辑 - 避免在自定义导航栏内放输入框——软键盘弹出会顶起页面，破坏沉浸布局，这类页面建议直接禁用
custom模式
最易被忽略的一点：iOS 状态栏文字颜色切换和导航栏背景透明度必须严格同步，延迟哪怕一帧，就可能出现白字配白底或黑字配黑图的不可读状态。
