TellYourAgent
返回
UI · №11 · PLATE

列表加载（怎么选）Pagination vs Infinite Scroll vs Load More

列表太长怎么翻页往下滑自动加载加载更多按钮

先看怎么选

列表长了怎么加载？找东西的场景要能记住"我在第几页"，刷内容的场景要滑不到底——选错的代价：用户在第 8 页找到一半被迫从头再滚。

朱批要定位/回跳 → 分页；沉浸刷内容 → 无限滚动；两头想兼顾 → Load More。

LIVE SPECIMEN真的能玩，点点看

    分页

    Pagination

    页码切换，每页固定条数，换页替换内容——位置可记忆、可分享。

    适合
    搜索结果、管理后台——用户需要"回到第 3 页"或把某页发给别人。
    不适合
    沉浸式内容流——每次点页码都是一次打断。
    实现细节与 Prompt
    web
    nav + 页码链接（可 URL 化）
    react
    <Pagination>（各组件库）
    Add pagination to the list: page number buttons with previous/next, showing current page state, 10 items per page, jumping to a page replaces the list content.

    无限滚动

    Infinite Scroll

    滚到底自动追加下一批，无感衔接——代价是"位置"这个概念消失了。

    适合
    信息流、瀑布流——用户漫无目的地刷。
    不适合
    用户要找特定东西、或页面有 footer（永远够不着）。
    实现细节与 Prompt
    web
    IntersectionObserver 触底加载
    react
    useInfiniteQuery（TanStack）+ 虚拟列表
    Use infinite scroll for the feed: when the user scrolls near the bottom of the feed container, automatically load and append the next batch with a small loading indicator; keep scroll position stable.

    加载更多

    Load More

    列表尾部一个按钮，点击追加下一批——用户主动控制的折中方案。

    适合
    想保留 footer、又不想硬分页；SEO 友好的内容列表。
    不适合
    批次很多的超长列表——点二十次"加载更多"是酷刑。
    实现细节与 Prompt
    web
    button + 追加渲染
    react
    fetchNextPage 手动触发
    Use a 'Load more' button at the end of the list: clicking appends the next batch and keeps everything above untouched; show the remaining count if known.

    详细说明

    三种加载方式的本质分歧是「位置感」：分页把位置交给用户，无限滚动把位置抹掉，Load More 把选择权留给点击。先想清用户是“找”还是“刷”，再跟 agent 说。