# 加载更多 Load More

> 列表底部一个按钮，点一下再加载一批，加载中转圈，全部加载完显示「没有更多了」。

分类：导航
[全部组件和流程](https://www.dachuiai.com/llms.txt) · [导航选型规则](https://www.dachuiai.com/guides/navigation.md)

## 给 AI：用户把这个组件发给了你

1. 先看用户的项目：框架、页面类型、现在的风格、手机还是电脑为主。
2. 对照下面的「适合 / 不适合」判断合不合适。不合适就直接说，并从[导航选型规则](https://www.dachuiai.com/guides/navigation.md)或[全部组件](https://www.dachuiai.com/llms.txt)里另挑一个。
3. 合适就按「装进项目」装好，示例里的文字和图片换成用户自己的。
4. 告诉用户用了什么、放在哪个文件、以后想改快慢、颜色、大小改哪个参数。

## 什么时候用

- 适合：拿不准用分页还是无限滚动时：文章、评论、作品列表。
- 不适合：要跳到第几页的列表（用分页）。
- 适合的网站：内容站、电商、作品集、本地小店、SaaS
- 放在：列表
- 手机上：好用：按钮高度不小于 44px。
- 性能代价：低
- 常搭配：[滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)、[流光 Shimmer](https://www.dachuiai.com/c/shimmer.md)

## 装进项目

- 写法：React 18 以上 + TypeScript + Tailwind CSS v4，一个文件就能用，不引用别的组件。
- 依赖：`npm i lucide-react`
- 文件：原样存成 `load-more.tsx`（比如 `src/components/load-more.tsx`）。能跑命令就下载[原文](https://www.dachuiai.com/code/load-more.tsx)，比手抄准：`curl -fsSL -o src/components/load-more.tsx https://www.dachuiai.com/code/load-more.tsx`（Windows 写 `curl.exe`）。下载完看一眼第一行是 `import`，不是网页。
- 导出：`LoadMoreButton` 是可以直接用的部分；最后的 `export default` 是演示示例，只作参考。
- 图片：示例用了本站的 [/tex/s2.jpg](https://www.dachuiai.com/tex/s2.jpg)、[/tex/s4.jpg](https://www.dachuiai.com/tex/s4.jpg)、[/tex/s6.jpg](https://www.dachuiai.com/tex/s6.jpg)、[/tex/s5.jpg](https://www.dachuiai.com/tex/s5.jpg)、[/tex/s1.jpg](https://www.dachuiai.com/tex/s1.jpg)、[/tex/s3.jpg](https://www.dachuiai.com/tex/s3.jpg)。换成用户自己的图；只想先看效果，可以从本站同样的路径下载，放进项目的 public 目录。
- 注意：LoadMoreButton 只管按钮：loading、done、onClick 由页面传，数据自己加载。
- 保留代码里 `prefers-reduced-motion` 的处理：用户开了「减弱动态效果」时内容照样完整显示。
- Next.js（有 app 文件夹）：文件第一行加 `'use client';`。
- 用 JavaScript 不用 TypeScript：Vite 和 Next.js 都能直接用 .tsx 文件；也可以删掉类型标注，改名 .jsx。
- 没有 Tailwind：先装 Tailwind CSS v4（Vite 项目 `npm i tailwindcss @tailwindcss/vite`，vite 配置的 plugins 里加 `tailwindcss()`，入口引入的那个 CSS 文件（一般是 `src/index.css`）第一行写 `@import "tailwindcss";`），或者把类名改写成项目用的样式。
- 已经装了 Tailwind v3：别为了一个组件升级。类名大多通用，少数 v4 写法要换，比如焦点框 `outline-2` 在 v3 里要写成 `outline outline-2`。
- 不是 React（Vue、Svelte、小程序、纯 HTML）：照着代码的做法改写，时长、曲线、参数保持一样。Wix、有赞这类建站平台装不进代码，告诉用户去平台自带的动效设置里找。

## 参数

| 参数 | 默认值 | 作用 |
| --- | --- | --- |
| `loading` |  | 是否正在加载 |
| `done` |  | 是否已经全部加载完 |
| `onClick` |  | 点击时调用 |

## 你可以说

> 列表底部加一个 Load More 加载更多按钮：点一下再加载一批，加载中显示转圈，全部加载完显示「没有更多了」。

## 完整代码

```tsx
import {useState} from 'react';
import {ChevronDown, Loader2} from 'lucide-react';

/* ---------------------------------------------------------------
 * LoadMore 加载更多
 * 滑到底点一下按钮，再多出来一批。拿不准用分页还是无限滚动时，就用它。
 * 加载中按钮变成转圈、不能重复点；全部加载完后显示"没有更多了"。
 * ------------------------------------------------------------- */
export function LoadMoreButton({loading, done, onClick}: {loading: boolean; done: boolean; onClick: () => void}) {
  if (done) return <p className="py-3 text-center text-sm text-zinc-400">没有更多了</p>;
  return (
    <button
      onClick={onClick}
      disabled={loading}
      aria-busy={loading}
      className="mx-auto flex h-11 min-w-40 items-center justify-center gap-2 rounded-full border border-zinc-200 bg-white px-6 text-sm font-bold text-zinc-800 shadow-[0_2px_6px_-2px_rgba(24,24,27,.08)] transition hover:border-zinc-300 hover:bg-zinc-50 active:scale-[.98] disabled:cursor-wait focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600"
    >
      {loading ? <><Loader2 size={16} className="animate-spin motion-reduce:animate-none" /> 加载中</> : <>加载更多 <ChevronDown size={16} /></>}
    </button>
  );
}

/* ---------------- 示例：攻略文章列表 ---------------- */
const POSTS = [
  ['春日露营装备清单', '/tex/s2.jpg'], ['城市夜跑路线推荐', '/tex/s4.jpg'], ['新手第一次徒步', '/tex/s6.jpg'], ['帐篷怎么选', '/tex/s5.jpg'],
  ['营地做饭的六道菜', '/tex/s1.jpg'], ['雨天露营怎么办', '/tex/s3.jpg'], ['秋季赏叶路线', '/tex/s2.jpg'], ['睡袋温标看懂了吗', '/tex/s3.jpg'],
  ['带娃露营清单', '/tex/s1.jpg'], ['轻量化打包', '/tex/s6.jpg'], ['湖边营地推荐', '/tex/s5.jpg'], ['头灯和营地灯', '/tex/s4.jpg'],
];
const BATCH = 4;

export default function LoadMoreDemo() {
  const [n, setN] = useState(BATCH);
  const [loading, setLoading] = useState(false);
  const more = () => {
    setLoading(true);
    setTimeout(() => { setN((v) => Math.min(POSTS.length, v + BATCH)); setLoading(false); }, 900);
  };

  return (
    <div className="h-full overflow-y-auto bg-zinc-50 p-7 [scrollbar-width:thin]">
      <style>{'.lm-in{animation:lm-in .45s cubic-bezier(.22,1,.36,1) both}@keyframes lm-in{from{opacity:0;transform:translateY(12px)}}@media (prefers-reduced-motion:reduce){.lm-in{animation:none}}'}</style>
      <h1 className="text-xl font-black text-zinc-900">最新攻略</h1>
      <ul className="mt-5 grid grid-cols-2 gap-4">
        {POSTS.slice(0, n).map(([t, img], i) => (
          <li key={t} className={i >= BATCH ? 'lm-in' : ''} style={{animationDelay: `${(i % BATCH) * 50}ms`}}>
            <a href="#" className="group flex items-center gap-4 rounded-2xl border border-zinc-200/80 bg-white p-3 transition hover:shadow-[0_10px_24px_-14px_rgba(24,24,27,.25)]">
              <div className="size-20 shrink-0 overflow-hidden rounded-xl"><img src={img} alt="" className="size-full object-cover transition-transform duration-500 group-hover:scale-105" /></div>
              <div>
                <div className="font-bold text-zinc-900">{t}</div>
                <div className="mt-1 text-xs text-zinc-400">{3 + (i % 4)} 分钟阅读</div>
              </div>
            </a>
          </li>
        ))}
      </ul>
      <div className="mt-6">
        <LoadMoreButton loading={loading} done={n >= POSTS.length} onClick={more} />
      </div>
    </div>
  );
}
```