Load More
加载更多
WebMobile上手难度: 容易
在列表底部放一个「加载更多」按钮，点一下追加一批内容。
Live Demo
真的可以点第 1 条内容。这是一段演示文本，用来占据一些空间。
第 2 条内容。这是一段演示文本，用来占据一些空间。
第 3 条内容。这是一段演示文本，用来占据一些空间。
你刚才看到的这个：文章底部那个「阅读全文」按钮、评论区的「查看更多回复」、搜索结果底部的「加载更多结果」。
它到底是什么
Load More 是分页和无限滚动之间的折中：它保留了用户的控制权（不会被强制打断），又不打断浏览（不会跳到新页面）。缺点是用户可能永远不点它。
加载更多load more查看更多更多按钮show more分页按钮
Anatomy · 它由什么组成
Trigger触发按钮
文字按钮，居中或通栏
Loading加载态
按钮内转圈
Append追加
内容接在末尾
End Note到底提示
「没有更多了」
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 内容较长但不需跳页 | 用 |
| 需要避免无限滚动的打断 | 用 |
| 用户要自己控制加载节奏 | 用 |
| 内容是线性阅读（文章、评论） | 用 |
| 数据量很大且需要定位到某页 | 不用 |
内容很多时，「加载更多」可能永远不被点——那时不如直接无限滚动。
加载后要保持滚动位置不跳动，否则用户会迷失。
Similar Patterns
别搞混一句话区分：在列表底部放一个「加载更多」按钮，点一下追加一批内容。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在列表底部加「加载更多」按钮：点击后按钮显示 loading 并禁用，追加 20 条内容，加载完滚动位置不跳动，加载完全部后显示「已经到底了」。
不要只对 AI 说
Bad → Better不要这样对 AI 说
底部加个加载更多的按钮。
改成这样说
列表底部加「加载更多」按钮：点击后 loading + 锁定防重复点击、追加内容且保持滚动位置不跳动、全部加载完时替换为「已经到底了」，首次加载用 Skeleton。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。