scroll-view 滚动监听不触发的主因是未同时满足 scroll-y="true"、固定高度和 bindscroll；懒加载应使用 uni.createintersectionobserver 而非 visibility；瀑布流需手动分组实现；虚拟滚动需依赖第三方插件并预设 item 高度。

uni-app 里 scroll-view 滚动监听不触发？懒加载失效的常见原因

不是 scroll-view 不支持懒加载，而是默认不开启滚动事件监听。它必须显式设置 enable-flex（仅影响布局）没用，真正关键的是 bindscroll + scroll-y + 高度约束三者缺一不可。

• scroll-y="true" 必须写，且父容器要有固定高度（比如 height: 600rpx），否则滚动区域不成立，bindscroll 根本不会触发
• 监听函数里不能只靠 e.detail.scrollTop 判断，要结合每个图片区块的 offsetTop 和视口高度做“进入可视区”计算，直接比对 scrollTop 容易误判
• H5 端没问题，但小程序端（尤其是微信）scroll-view 的 bindscroll 有节流，高频滚动时会丢事件，建议加防抖或改用页面级 onPageScroll

uni-app 图片懒加载该用 uni.createIntersectionObserver 还是 visibility？

用 uni.createIntersectionObserver。它才是 uni-app 官方推荐、多端兼容的方案；visibility 是 CSS 属性，无法触发 JS 加载逻辑，纯属误导。

• 必须在 onReady 或组件 mounted 后创建观察器，不能在 data 里初始化，否则上下文丢失
• 观察目标必须是真实 DOM 节点（this.$refs.imgItem），不能是虚拟节点或未渲染的元素；列表动态渲染时，要等 $nextTick 再执行 observe
• 小程序端需注意：threshold 参数只接受数组（如 [0, 0.1, 0.5]），设为数字会静默失败；H5 端则支持单个数值

瀑布流布局在 uni-app 里为什么图片错位、高度塌陷？

因为 uni-app 默认不支持 CSS column-count 或 display: grid 的跨端瀑布流，所谓“两列瀑布流”，本质是手动分组 + 绝对定位或 flex 模拟，高度计算不准就必然错位。

• 别用 flex-wrap: wrap 直接实现瀑布流——它只能等高排列，不是真正的瀑布流
• 推荐方案：用 JavaScript 把图片数组按“两列高度和最小”原则分组（类似 Array.reduce 累计高度），每组渲染一个 view，内部用 flex-direction: column 堆叠
• 图片宽高比不确定时，先占位（比如 aspect-ratio: 3/4），等 uni.getImageInfo 拿到真实尺寸再重排，否则首屏渲染就会跳动

长列表性能差、卡顿，virtual-list 在 uni-app 中怎么接入？

uni-app 官方没有内置虚拟滚动，但可以用 @dcloudio/uni-ui 的 uni-list + uni-load-more 做分页加载；真要虚拟滚动，得引入第三方库如 vue-virtual-scroller，但要注意兼容性取舍。

• vue-virtual-scroller 的 RecycleList 在 H5 可用，但微信小程序不支持 render function，必须用编译后的 wxml 版本（如 uni-virtual-list 插件）
• 虚拟滚动依赖精确的 item 高度，如果图片高度动态，必须提前传入预估高度（itemSize），否则滚动条拖拽会失真
• 慎用 watch 监听数据变化来刷新虚拟列表——长列表下频繁 diff 会卡死，应改用 forceUpdate 或 key 强制重置

瀑布流+懒加载真正难的不是代码拼凑，而是各端渲染机制差异带来的“看似正常实则漏加载”——比如小程序里 IntersectionObserver 对 position: fixed 元素不生效，这种细节查文档都未必写清楚，得真机反复测。