无限滚动
Infinite Scroll
交互模式也叫：滚动加载、触底加载、上拉加载更多
一句话：用户滚动到列表底部时自动加载下一批内容，不用手动翻页，列表看起来像没有尽头。
详细解释
无限滚动常见于信息流、商品列表和图片瀑布流：页面先加载一批数据（比如 20 条），用户快滑到底部时，前端自动请求下一页并追加到列表末尾。检测「快到底了」一般用 IntersectionObserver 监听列表底部的一个占位元素。
它和 懒加载 容易混淆：无限滚动是不断「追加新数据」，懒加载是页面上已有的图片或模块「等滚到附近再加载资源」，两者经常一起用。
只需要浏览、不需要精确定位的内容适合无限滚动；需要跳到第几页、回头找某条数据的后台表格更适合分页。底部要处理三种状态：加载中、没有更多了、加载失败点击重试。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
商品列表改成无限滚动：首次加载 20 条，滚动到距离底部 200px 时自动请求下一页并追加到末尾；加载时底部显示转圈图标，没有更多数据时显示「没有更多了」，请求失败显示「加载失败，点击重试」。