layui table 组件原生不支持流加载,需禁用 page: false 并用 flow.load 手动接管滚动监听与数据追加,配合 table.render 初始化表头、done 回调插入 dom、table.resize 同步列宽及 flow.lazyimg 重绑图片。

Layui 的 table 组件原生不支持流加载(infinite scroll),所谓“分页实现流加载效果”,本质是绕过它的 page: true 分页机制,手动接管滚动监听 + 数据追加逻辑。强行开启内置分页再套流加载,只会冲突、重复请求、错乱翻页。
为什么 table.render() 开启 page 后无法流加载
内置分页会强制渲染 .layui-laypage 区域,并接管所有翻页行为;它把 url 请求封装在内部,不暴露滚动事件钩子。你监听不到表格容器滚动,也拿不到“是否该加载下一页”的判断时机。
-
page: true时,table.reload()会清空整个表格并重绘,滚动位置归零,无法平滑追加 - 设置
height启用scrollY后,滚动事件实际发生在.layui-table-body上,但内置分页不监听它 - 即使强行绑定
scroll事件,table内部的pullData方法只配合它自己的分页参数工作,不会响应你手动触发的加载
正确做法:禁用 page,用 flow.load 接管滚动
核心思路是把表格当纯 DOM 容器,用 flow.load() 负责滚动检测和请求,用 table.render() 仅初始化表头结构(data: []),后续所有数据都靠 done 回调手动拼 <tr> 插入 <code>tbody。
- 初始化
table.render()时必须设page: false,且data: [](空数组,保证表头渲染但无数据) -
flow.load()的elem指向表格外层容器(如#demo),不是.layui-table-body - 在
flow.load()的done回调里,用elem.next('.layui-table-box').find('tbody')找到真实tbody,再逐条生成<tr><td>...</td></tr>并append() - 每次追加后必须调用
table.resize(),否则列宽不同步,表头/内容错位
滚动到底部判断不准?关键在 scrollElem 和计算方式
常见错误是监听了 window 或表格最外层 div,导致滚动距离算错——因为真正可滚动的是 .layui-table-body,它的 scrollTop 和 scrollHeight 才是有效值。
-
flow.load()的scrollElem必须显式设为'.layui-table-body',不能依赖默认document - 临界距离
mb建议设小一点(如20),避免因表格高度计算误差导致加载延迟 - 不要用
$(window).scrollTop() + $(window).height() >= $(document).height()这类全局判断,它对表格内滚动完全失效 - 如果表格容器有 padding/border,需在计算时减去,否则可能永远差几像素触不到
图片列懒加载失效?必须在 done 里重新绑定
表格动态生成的 img[lay-src] 不会被 flow.lazyimg() 初始扫描到,reload 或流加载新数据后,这些新 img 标签仍是“未激活”状态。
- 在
table.render()的done回调里(不是flow.load()的done),用 jQuery 找出当前表格内的所有待懒加载图片:elem.next('.layui-table-box').find('img[lay-src]') - 显式调用
flow.lazyimg({ elem: $imgs }),传入这个集合,避免重复绑定已处理过的图片 -
templet中必须用lay-src="{{d.avatar}}"+ 占位src(如src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="),写src就直接加载了
流加载不是开关一开就完事,它要求你精确控制滚动容器、DOM 插入时机、图片绑定生命周期。最容易被忽略的是:每次新数据进来,都要手动 resize() 和重新 lazyimg(),否则错位和图片不显示就是必然结果。











