Infinite scroll 无限滚动
/IN-fin-it SKROHL/ · noun · 导航类模式 · #101
列表或信息流在你快滚到底时自动加载下一批内容，页面看起来永远没有尽头。信息流很适合它；但需要查找、比较内容或者要用到页脚的页面，往往不适合。
别名：无限滚动、无限加载、滚动加载、上拉加载更多。
你可能会这样叫它
- “越往下滑内容越多”
- “刷不到底的信息流”
- “滑到底自动加载更多”
- “没有页码一直往下翻”
……它的名字是 无限滚动（Infinite scroll）。
常见问题
无限滚动和分页怎么选？
无限滚动适合用户没有明确目标、随便刷的信息流，比如社交动态、图片流；分页适合需要搜索、比较或回头再找的结果，因为每一页固定、可以分享链接，用户也能到达页脚。拿不准时，用「加载更多」按钮是折中方案。
代码里叫什么
| Web (JS) | IntersectionObserver 观察列表末尾的一个哨兵元素 |
|---|---|
| SwiftUI | List .onAppear 最后几行出现时加载下一页 |
| UIKit | UICollectionViewDataSourcePrefetching |
| Jetpack Compose | LazyColumn collectAsLazyPagingItems() |
| Android (Views) | PagingDataAdapter |
| Flutter | ListView.builder ScrollController |
复制给 AI 编程工具
把这个列表改成无限滚动：访客快到底部时，用 IntersectionObserver 观察最后一项后面的哨兵元素，加载下一页并追加到列表，加载期间显示骨架屏占位行。全部加载完后显示「已经到底了」；请求失败时显示重试按钮；保留 URL 或滚动位置，让返回键回到原来的位置；页脚仍然能够到达。用礼貌的方式向读屏用户播报新增内容。