下拉刷新反馈
它让用户在列表顶部继续向下拖动,通过松手触发内容重新加载。
- 把页面往下拽一下就重新加载
- 拉到最上面再往下扯会转圈
- 手指往下拖页面让内容变新的动作
- 下拉刷新
- 下拉更新
- 拉动刷新
- 刷新手势
示例
示例可交互
Web / iOS / Android 对照
Web需自己实现
桌面网页与移动浏览器;移动端可能与浏览器手势冲突
Pull to Refresh
桌面网页没有通用的下拉刷新交互,移动浏览器又可能把这个手势用于刷新整个页面。网页自行实现时容易与浏览器行为冲突,也不能把隐藏手势作为唯一刷新入口。
通常怎么做:为内容区提供清晰可见的刷新按钮;确需在移动网页实现时,谨慎处理滚动边界和浏览器自己的下拉刷新。
iOS原生支持
iOS / iPadOS 的可滚动内容
Refresh Control
也叫 Pull to Refresh
SwiftUI: .refreshable|UIKit: UIRefreshControl
刷新控件附着在可滚动内容上,只在用户到达顶部后继续下拉时出现,并在异步刷新完成后结束加载状态。
Android原生支持
Android 手机 / 平板;Material 3 Compose
Pull to Refresh
Compose Material 3: PullToRefreshBox
Material 3 提供下拉刷新容器和指示器,刷新状态由应用控制,并在任务完成后关闭。
使用规范
什么时候用
- 可滚动列表中的内容会随时间更新,用户可能主动查看最新结果
- 列表已经滚到顶部,继续下拉不会和正常浏览内容冲突
- 刷新动作安全、可重复执行,并能明确展示进行中和完成状态
什么时候别用
- 把它作为唯一刷新方式 → 隐藏手势不容易被所有用户发现
- 内容不会变化或刷新代价很高
- 桌面网页或复杂嵌套滚动区域中,手势容易与浏览器和页面滚动冲突
给 AI 的提示词
这条词条还没有经过验证的实现提示词。