Pull to Refresh
下拉刷新
Pull down at the top of a list and release to reload the data.
Live Demo
Actually clickablePress and drag down here
What you just saw:Pulling down on a WeChat Moments feed or a mail app, and the spinning arrow that appears at the top of virtually every news app.
What it actually is
Pull to refresh replaces a refresh button with the physical intuition of "pull downward". Its biggest weakness is discoverability — users have to discover it by trying. So the majority of apps still keep a refresh button in the nav bar as a backup.
Anatomy · What it's made of
Threshold触发阈值
Roughly 64–80px
Indicator指示器
Arrow rotates into a spinner as you pull
Refresh刷新中
Locks the list and disables re-triggering
Overscroll阻尼
Gets heavier the further you pull, for physical feedback
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| A mobile list whose content changes over time | Yes |
| Content is ordered with "newest first" (feed, messages, news) | Yes |
| Users actively want to update | Yes |
| Desktop | No |
| There is little content and it all fits on one screen | Depends |
The feel of the gesture lives in the threshold (roughly 60–80px) and the damping factor — copying someone else's numbers will not feel right.
You must lock the list while refreshing so it cannot be pulled again, otherwise multiple refreshes fire.
Similar Patterns
Don't mix these upPull to RefreshCurrent
下拉刷新
Pull down at the top of a list and release to reload the data.
Infinite Scroll
无限滚动
Keep scrolling down and the next page loads automatically, with no "next page" button anywhere.
In one line:Pull down at the top of a list and release to reload the data.
Infinite Scroll
无限滚动
Keep scrolling down and the next page loads automatically, with no "next page" button anywhere.
Swipe Action
滑动操作
Press a list item and slide it left, and actions like delete or archive slide out from underneath.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
How to tell AI
Three levels of promptAdd the component name and specifics
Add pull to refresh to a list: pulling past 72px at the top triggers it, the indicator rotates with the pull progress, the list locks while refreshing, and it springs back and updates the content when done.
Don't just say this to AI
Bad → BetterDon't say this to AI
Pulling down refreshes.
Say this instead
Add Pull to Refresh: damp the touch displacement with a 0.5 factor, trigger past 72px and switch the indicator from an arrow to a spinner, lock the list with refreshLock while refreshing to prevent duplicate triggers, spring back on completion, and provide a separate explicit refresh button on desktop.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.