下拉刷新
Pull to Refresh
别名:Pull to Refresh下拉刷新下拉更新拉动刷新手势刷新下拉加载最新
这是什么
在列表顶部按住并向下拖动，出现随拖动距离变化的加载指示，超过阈值后松手即重新拉取最新数据。 它解决的是"内容可能已经过期"的问题——用户主动、可预期地请求更新， 而不是被动等待自动轮询，刷新的时机和结果都由自己掌控。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 移动端时间线、消息、动态列表
- 内容有时效性但无需自动轮询
- 用户已被 iOS / Android 教育过该手势
✕ 不适用场景
- 桌面鼠标环境，下拉手势不自然
- 顶部有重要吸顶操作，下拉容易误触
- 数据高频变化，应改用自动同步或推送
常见形式
指示器跟随
Tracked spinner
指示器位置与角度映射下拉距离，过阈值翻转
文字提示
Text hint
「下拉刷新 / 松手刷新」两段状态文案
骨架接管
Skeleton handoff
松手后以骨架屏过渡到刷新后的内容
实现要点
touch-actionoverscroll-behaviortransformtransition在 scrollTop 为 0 时接管下拉手势：监听 touchmove（需 passive: false 才能 preventDefault）， 拖动距离乘阻尼系数映射为指示器位移；超过阈值后松手进入刷新态并锁住， 完成后回弹复位。桌面用 pointer 事件模拟鼠标拖拽。容器加 overscroll-behavior: contain 防止外层页面跟着滚动。
横向对比
查看完整对比 →相关概念
用"滚动到底自动追加下一页"取代传统分页：用户持续下滑，新内容不断出现， 底部以加载指示或哨兵元素衔接。它解决的是浏览节奏被打断的问题—— 用户不必寻找"下一页"按钮，注意力始终停留在内容流上，长列表被拆成一次次无感的追加。
交互模式替代方案用带页码的控件把长结果集切分为离散页面：用户显式点击页码或上一页 / 下一页 按钮取回对应片段，当前位置永远可知、可分享、可回退。与无限滚动的"失控 漂移"相对，它是数据浏览中最可控的方式，也是搜索结果与后台表格的默认选择。
组件替代方案用一个持续旋转的圆环或圆点表示"正在处理"。占用空间极小、语义全球通用， 适合嵌入按钮内、跟随光标或作为局部区块的轻量加载反馈。 它只表达"忙碌"，不表达进度多少，也不预告还剩多久。
动效搭配使用用与真实内容结构一致的灰色占位块表示加载状态，通常带轻微的微光扫过或呼吸动画。 它告诉用户"内容马上就位，结构长这样"，而不是让用户盯着空白或转圈等待。
交互模式相似概念在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件搭配使用