lazy-load在scroll-view中不生效是微信小程序平台限制所致，仅支持页面级滚动；必须改用uni.createIntersectionObserver手动监听视口，且需设固定高度、用真实ref节点、threshold传数组、预设图片高度并避免v-if控制显隐。

lazy-load 属性在 scroll-view 里根本不会触发——这不是你代码写错了，是微信小程序平台明确限制：它只响应页面级滚动（onPageScroll），对自定义滚动容器无感知。

scroll-view 里用 lazy-load 为什么全图一起加载

现象是滑动时所有 瞬间发请求、白屏卡顿、@load 不触发。本质是平台不监听 scroll-view 的滚动事件，lazy-load 形同虚设。

• 必须改用 uni.createIntersectionObserver 手动监听每个图片是否进入视口
• scroll-view 必须显式设 scroll-y="true" 且父容器有固定高度（如 height: 600rpx），否则连滚动区域都不存在
• 观察目标必须是真实挂载的 DOM 节点：this.$refs.imgRef，不能传字符串选择器（如 '#img-1'）
• 要在 this.$nextTick() 后调用 observer.observe()，否则 this.$refs 还是空的

小程序端 threshold 设错会静默失败

微信小程序要求 threshold 必须是数组，比如 [0, 0.1, 0.5]；设成数字 0.2 或省略，图片就永远不加载，控制台也不报错。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• H5 端支持单数值（如 0.05），但小程序只认数组——跨端写法得做判断
• 推荐统一用数组，例如 threshold: [0, 0.1]，表示刚触边和进入 10% 时都可触发
• 每次 observe() 后记得调用 observer.disconnect()，否则内存泄漏

图片没预设高度，懒加载反而更卡

宽高不定 → 渲染后重排 → 滚动跳动 → IntersectionObserver 频繁回调 → 图片反复加载或闪白。

• 最优解：服务端返回图片宽高字段，前端直接绑定 :style="{ height: item.height + 'px' }"
• 做不到就用 uni.getImageInfo 预加载（比 new Image() 可靠，安卓 WebView 里也能触发解码）
• 绝对别用 v-if 控制显隐——组件销毁重建，src 重赋值又走一遍加载流程
• 用 :style="{ opacity: loaded ? 1 : 0 }" + CSS transition 更轻量，防抖动也更稳

真正卡顿的从来不是“没懒加载”，而是图片本身是 5MB 原图、没裁剪、没设宽高、还堆在 scroll-view 里硬解码。懒加载只是最后一道闸，前面三道（CDN 动态裁剪、固定占位、原生渲染启用）漏了哪一道，它都救不回来。