无限滚动
Infinite Scroll
初级通用无限滚动(Infinite Scroll)是在用户接近列表底部时,继续加载并接上后续内容的浏览方式。它让你不用反复翻页,就能连续浏览动态、图片或推荐内容;前提是列表还有内容可加载。
你可能会说:「我想让动态列表滑到底部时自动接着显示更多内容,不用点下一页。」
动手看看关注动态接续加载
关注动态看看大家今天分享了什么
林间书店 · 12 分钟前周末的旧书交换角,已经摆满了新到的书。
阿南 · 35 分钟前给阳台上的薄荷换了个更大的花盆。
周周 · 1 小时前今天的城市散步路线:从河边一直走到老剧院。
接近底部,继续加载
在列表内滚动,再切换加载阶段
加载阶段
还有更多动态
先在动态列表里向下滚动,找到末尾提示;再切换「加载阶段」,模拟接近底部后请求下一批内容的过程。
要点无限滚动是怎样接上后续内容的?
- 1
接近底部时请求下一批内容
你向下浏览动态时,页面检测到列表快到底了,就请求下一批数据并接在末尾。通常会提前一点加载,因为等用户看到底部才发请求,滚动就容易被加载过程打断。
- 2
记住进度才能接对位置
每次请求都要知道从哪里继续取,否则可能重复显示旧内容,或漏掉新内容。我们还要区分正在加载、加载失败和已经到底这几种状态,因为它们决定列表末尾该给用户什么反馈。
- 3
让用户找得到返回路径
列表越长,用户越可能打开一条内容后再返回。如果返回时丢了原来的滚动位置,就得重新找刚才看到哪里。你还可以提供明确的加载状态和返回顶部入口,帮助用户掌握浏览进度。
容易混淆的地方
无限滚动和分页都能分批取数据,区别在于用户怎么前进:分页让用户主动跳到某一页,无限滚动则把新内容接在当前列表后面。它也不等于懒加载:懒加载说的是内容何时开始加载,图片即使用分页展示,也可以等进入视野再加载。
什么时候用
适合用
- 做社区动态流,用户主要是随手浏览下一条,而不是定位到固定页码。
- 做图片灵感库,用户会连续往下看,看到感兴趣的图片再打开详情。
- 做推荐内容列表,内容持续更新,用户不需要记住自己看到了第几页。
不适合用
- 做订单管理后台,用户需要按页核对记录、返回指定位置时,用分页更方便。
- 做很短的设置选项列表,内容一次就能看完时,直接展示完整列表即可。
- 做有明确起点和终点的教程章节,用户要按顺序跳转时,用章节导航更合适。
练一练选一个答案,看看解释
你在做一个社区 App 的动态流,用户常常连续浏览几十条动态。团队希望减少反复点“下一页”,同时让用户打开动态再返回时能接着看。你会选哪种方案?
让 AI 帮你做复制给 AI Agent 直接用
请把社区动态列表做成无限滚动:用户接近底部时分批请求并追加内容,避免重复请求和重复条目;显示加载中、失败重试和已到底状态。打开动态详情再返回时,保留列表内容和滚动位置。