直接用u-navbar的:background绑定动态rgba值实现透明导航栏滚动渐变，背景色从rgba(0,0,0,0)线性过渡到rgba(0,0,0,0.8)，需设navigationstyle为default、监听onpagescroll并加阈值与节流。
透明导航栏 + 滚动渐变怎么配
直接用 u-navbar 的 :background 绑定动态 rgba 值就行，别碰原生 navigationStyle: "custom" 后自己手写 fixed 导航栏——那样在 iOS 下容易触发页面重绘、滚动卡顿。
关键点是：导航栏背景色必须从 rgba(0,0,0,0) 开始，随 pageScroll 事件中 scrollTop 线性过渡到 rgba(0,0,0,0.8)。注意不是用 opacity，否则整个导航栏内容（文字、图标）也会变透明。
- 在
pages.json中对应页面设"navigationStyle": "default"（保留原生导航栏，只改背景） -
u-navbar上加:background="navBg"，data 里初始化navBg: 'rgba(0,0,0,0)' - 监听
@onReachBottom不管用，必须用@onPageScroll，且只取e.detail.scrollTop（微信小程序和 App 端行为一致） - 建议加个阈值（比如
scrollTop > 100才开始渐变），避免手指刚下拉就突变
背景图怎么铺满且不拉伸变形
别用 mode="scaleToFill"，那张图会糊成马赛克；也别用 mode="aspectFit"，顶部留白破坏沉浸感。真正稳的方案是 mode="widthFix" + 容器固定宽高比 + object-fit: cover（仅 H5/APP 有效），但小程序里得靠 padding-bottom 技巧。
-
<image></image>外层套一层<view class="bg-wrap"></view>，设position: relative; width: 100%; padding-bottom: 56.25%;（16:9 比例） -
<image></image>本身设position: absolute; top: 0; left: 0; width: 100%; height: 100%;，mode 用"widthFix" - 如果后端图比例不统一，优先让服务端返回裁剪好的封面图（如 750×422），比前端硬撑更省性能
- 真机调试时 iOS 微信开发者工具可能渲染异常，加
transform: translateZ(0)强制硬件加速
用户信息区域怎么悬浮+吸顶
“吸顶”不是靠 position: sticky——小程序里这个属性基本失效；也不是靠 scroll-view 的 scroll-into-view，那是为锚点设计的，不是吸顶。
- 用
<u-sticky></u-sticky>组件（uView 提供），它内部通过监听页面滚动 + 动态计算top值实现，兼容性好 - 把头像、昵称、简介、关注按钮这些都包进
<u-sticky></u-sticky>，不要只包一个元素 - 注意
<u-sticky></u-sticky>默认吸顶距离是 0，如果导航栏有高度，要传:offset-top="44"（单位 rpx） - 别在 sticky 区域内放
input或textarea，iOS 下键盘弹起时会错位，换用uni-popup+ 自定义输入框更稳妥
滚动时图片闪烁、重绘严重怎么办
这不是样式问题，是 image 加载完成前没占位导致 layout 反复计算。尤其在列表页混排时，一张图加载慢，整行都会跳。
- 给每张图外层容器设固定宽高（如
width: 100rpx; height: 100rpx;），而不是只靠image自身 mode 控制 - 用
v-if="item.avatar"替代v-show，避免未加载图仍参与 flex 布局计算 - 慎用
lazy-load，微信小程序基础库低于 2.24.0 时该属性无效，反而导致首屏空白 - App 端可考虑用
nvue页面重写头部区域——原生渲染下图片加载和布局更稳定，但需放弃部分 CSS 特性（如 filter）
pageScroll 事件触发频率和 scrollTop 精度的差异。微信小程序里滑动快时可能漏帧，H5 则容易过度触发。建议加个节流（setTimeout + 标志位），别直接在 scroll 回调里改 background。
