Pull to Refresh
下拉刷新
Mobile上手难度: 中等
在列表顶部往下拉，松手后重新加载数据。
Live Demo
真的可以点在区域里按住往下拖
3 条新动态
2 张新照片
1 条新评论
你刚才看到的这个：微信朋友圈下拉、邮件 App 下拉、几乎所有新闻 App 顶部下拉时出现的转圈箭头。
它到底是什么
Pull to Refresh 用一个「往下拉」的物理直觉替代了刷新按钮。它的最大问题是发现性——用户必须自己试出来。所以绝大多数 App 仍然在导航栏保留一个刷新按钮作为备份。
下拉刷新pull to refresh下拉刷新手势拉动刷新
Anatomy · 它由什么组成
Threshold触发阈值
约 64–80px
Indicator指示器
箭头随下拉旋转成圈
Refresh刷新中
锁定列表，禁用再次触发
Overscroll阻尼
越拉越沉，给出物理反馈
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 移动端列表内容会随时间变化 | 用 |
| 内容以「最新」为优先（动态、消息、新闻） | 用 |
| 用户主动想更新 | 用 |
| 桌面端 | 不用 |
| 内容很少、一屏装得下 | 视情况 |
下拉的阈值（约 60–80px）和阻尼系数决定手感，抄别人的参数不会对。
刷新时必须锁住列表不允许继续下拉，否则会出现多次刷新。
Similar Patterns
别搞混一句话区分：在列表顶部往下拉，松手后重新加载数据。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
给列表加下拉刷新：顶部下拉超过 72px 触发，指示器随拉动进度旋转，刷新中锁定列表，完成后回弹并更新内容。
不要只对 AI 说
Bad → Better不要这样对 AI 说
下拉可以刷新。
改成这样说
加 Pull to Refresh：touch 位移乘 0.5 做阻尼、超过 72px 触发并把指示器从箭头切成旋转、刷新中用 refreshLock 锁定列表防重复触发、完成后回弹、桌面端另配显式刷新按钮。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。