Pull to refresh 下拉刷新

/PULL too ree-FRESH/ · noun · 操作类模式 · #074

把列表顶部往下拖、松手,就加载最新内容。这个手势是看不见的,所以旁边还得留一个看得见的刷新入口,给不能或不想滑动的人。

Pull to refresh(下拉刷新) UI 模式示例:CatchUI 图鉴标本

别名:下拉刷新页面。

你可能会这样叫它

  • “往下拉刷新”
  • “下拉刷新页面”
  • “手指往下拖更新内容”
  • “往下拉时出现的转圈”
  • “顶部往下滑刷新”

……它的名字是 下拉刷新(Pull to refresh)。

常见问题

下拉刷新是什么意思?

下拉刷新指列表在最顶部时,用手指把页面往下拖、松手后加载最新内容的操作,拖动时通常会出现一个转圈。安卓官方叫 swipe to refresh(滑动刷新)。

下拉刷新功能是哪个公司最先发明的?

一般认为是独立开发者 Loren Brichter 在 iPhone 推特客户端 Tweetie 里首创的;Tweetie 后来被 Twitter 收购,这个手势也随之归了 Twitter。

代码里叫什么

SwiftUI.refreshable
UIKitUIRefreshControl
Jetpack ComposePullToRefreshBox
Android (Views)SwipeRefreshLayout
FlutterRefreshIndicator CupertinoSliverRefreshControl
Web (HTML / ARIA)overscroll-behavior-y 没有网页 API:手机浏览器下拉会重新加载整页,自己实现时要用它关掉浏览器自带的下拉

复制给 AI 编程工具

给这个列表加下拉刷新:列表在最顶部时往下拖,会露出一个跟着手指移动的转圈;拖过阈值松手就重新加载最新内容,加载期间转圈不停,完成后列表回弹。用平台自带的控件(refreshable、UIRefreshControl、SwipeRefreshLayout 或 RefreshIndicator),给读屏软件播报“正在刷新”,另外再提供一个看得见的“刷新”按钮或菜单项,因为不是每个人都能做这个手势。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)