uni-app瀑布流卡顿闪图因scroll-view无滚动节流、iOS强制重绘及未预占位致回流需分列管理状态、设placeholder高度、用getBoundingClientRect精准判断可视区、二维数组组织数据、禁用v-if显隐图片并缓存加载状态。uni-app 里用 scroll-view 做瀑布流懒加载为什么图片总闪、卡顿因为 scroll-view 自身不支持原生滚动事件节流且在 iOS 上会强制触发重绘一旦子项高度动态、图片未预占位就会反复回流 加载冲突。真实场景下不是“加个 bindscrolltolower 就完事”而是得控制加载节奏 预估高度 拦截重复请求。必须给每个瀑布流列维护独立的 scrollTop 和 loading 状态不能共用一个 flag图片加载前先设固定 placeholder 高度比如 min-height: 200rpx否则 layout shift 触发多次重排在 bindscroll 里别直接调接口先用 getBoundingClientRect() 判断最底部 item 是否进入可视区比 scrolltolower 更准安卓真机上 scroll-view 的 scroll-top 有时不准建议用 uni.createSelectorQuery() 主动查容器位置uni-app 瀑布流数据结构怎么组织才不崩不能把所有数据 flat 成一维数组再按列分配——这样无法做局部更新删/插/加载新项时整个列表会重渲染。必须按列拆成二维数组每列是独立响应式对象。初始化用 Array.from({ length: 2 }, () []) 创建两列空数组列数根据屏幕宽度算插入新数据时选当前长度最小的列 push而不是轮询或取模避免列高偏差越来越大删除某一项必须知道它在哪一列、哪个索引用 splice 精确操作不能 filter 全量重建别在 v-for 里对二维数组做 map flat这会让 Vue 丢失 key 关联导致过渡动画失效、input 失焦uni-app 使用 uni.loadSubNVue 或 renderjs 能提升瀑布流性能吗不能。这两个方案在瀑布流场景下反而更慢renderjs 无法访问 Vue 响应式数据每次更新都要跨线程通信subNVue 是为弹窗/侧滑设计的不适用于长列表滚动容器且 iOS 上 subNVue 与主页面滚动不同步会出现撕裂感。 Mokker AI AI产品图添加背景