uni-app表格卡顿主因是v-for全量渲染,应改用scroll-view+slice动态渲染可视区域数据,并设固定行高、节流setData、避免DOM测量;虚拟滚动需专用uni-app组件。uni-app 里表格卡顿是因为 v-for 渲染了全部数据uni-app 的 v-for 默认一次性渲染整个数组,哪怕你只显示前 20 行,它也会把 10000 条数据全塞进 DOM —— 页面直接卡死或白屏。这不是 uni-app 特有,但小程序平台(尤其是微信)对节点数和渲染深度极其敏感,比 H5 更容易触发性能瓶颈。真正要做的不是“优化渲染”,而是“避免渲染不需要的行”:用 slice() 控制当前页可见数据,比如 list.slice(start, end)配合 scroll-view 滚动监听,动态更新 start/end,而不是用 scroll-view + v-for 全量渲染禁用 flex 布局做表格行(尤其在 iOS 微信),改用 display: table 或固定宽高的 view 模拟表格结构,减少重排压力怎么用 scroll-view 实现滚动加载(非触底分页)“分段加载”不是等用户点“下一页”,而是在滚动过程中悄悄替换数据块。关键在于监听 scrolltoupper 和 scrolltolower 不够用 —— 它们只在顶部/底部触发一次。得靠 bindscroll + scrollTop 手动判断可视区域。实操要点:给 scroll-view 设固定高度(height: 600px),并启用 scroll-y每行设固定高度(比如 line-height: 80rpx),这样能用 scrollTop / rowHeight 算出当前偏移行号维护一个 visibleRange = [start, end],每次 bindscroll 触发时重新计算,并 setData 更新 renderList别在 bindscroll 里直接调 this.setData —— 加个 throttle(比如 100ms 间隔),否则 iOS 微信会丢 scroll 事件uni.createSelectorQuery 不能用来测表格行高有人想用 uni.createSelectorQuery 获取每行真实高度来适配不同内容,这在小程序里基本不可行:查询是异步的、批量节点查询容易超限、且首次渲染前查不到尺寸。更糟的是,它会强制触发 layout,让滚动更卡。替代方案更务实: Fotor AI Image Generator Fotor 平台的 AI 图片生成器

更多推荐