跳到正文

无限滚动

Infinite Scroll

初级通用

无限滚动(Infinite Scroll)是在用户接近列表底部时,继续加载并接上后续内容的浏览方式。它让你不用反复翻页,就能连续浏览动态、图片或推荐内容;前提是列表还有内容可加载。

你可能会说:「我想让动态列表滑到底部时自动接着显示更多内容,不用点下一页。」

动手看看

关注动态看看大家今天分享了什么
林间书店 · 12 分钟前周末的旧书交换角,已经摆满了新到的书。
阿南 · 35 分钟前给阳台上的薄荷换了个更大的花盆。
周周 · 1 小时前今天的城市散步路线:从河边一直走到老剧院。
小满 · 2 小时前终于整理好了上个月拍的海边照片。
老许 · 3 小时前菜市场门口的桂花,今天特别香。
接近底部,继续加载
正在加载更多动态…
已经看完全部动态
在列表内滚动,再切换加载阶段
加载阶段
还有更多动态

先在动态列表里向下滚动,找到末尾提示;再切换「加载阶段」,模拟接近底部后请求下一批内容的过程。

要点

  1. 1

    接近底部时请求下一批内容

    你向下浏览动态时,页面检测到列表快到底了,就请求下一批数据并接在末尾。通常会提前一点加载,因为等用户看到底部才发请求,滚动就容易被加载过程打断。

  2. 2

    记住进度才能接对位置

    每次请求都要知道从哪里继续取,否则可能重复显示旧内容,或漏掉新内容。我们还要区分正在加载、加载失败和已经到底这几种状态,因为它们决定列表末尾该给用户什么反馈。

  3. 3

    让用户找得到返回路径

    列表越长,用户越可能打开一条内容后再返回。如果返回时丢了原来的滚动位置,就得重新找刚才看到哪里。你还可以提供明确的加载状态和返回顶部入口,帮助用户掌握浏览进度。

容易混淆的地方

无限滚动和分页都能分批取数据,区别在于用户怎么前进:分页让用户主动跳到某一页,无限滚动则把新内容接在当前列表后面。它也不等于懒加载:懒加载说的是内容何时开始加载,图片即使用分页展示,也可以等进入视野再加载。

什么时候用

适合用

  • 做社区动态流,用户主要是随手浏览下一条,而不是定位到固定页码。
  • 做图片灵感库,用户会连续往下看,看到感兴趣的图片再打开详情。
  • 做推荐内容列表,内容持续更新,用户不需要记住自己看到了第几页。

不适合用

  • 做订单管理后台,用户需要按页核对记录、返回指定位置时,用分页更方便。
  • 做很短的设置选项列表,内容一次就能看完时,直接展示完整列表即可。
  • 做有明确起点和终点的教程章节,用户要按顺序跳转时,用章节导航更合适。

练一练

你在做一个社区 App 的动态流,用户常常连续浏览几十条动态。团队希望减少反复点“下一页”,同时让用户打开动态再返回时能接着看。你会选哪种方案?

让 AI 帮你做

请把社区动态列表做成无限滚动:用户接近底部时分批请求并追加内容,避免重复请求和重复条目;显示加载中、失败重试和已到底状态。打开动态详情再返回时,保留列表内容和滚动位置。

接下来学什么