下拉刷新是JavaScript实现的UI行为，非HTML原生能力；需手动串联手势识别、数据请求、状态更新与滚动控制，且须处理防抖、错误恢复、数据比对等边界问题。
HTML 本身没有下拉刷新机制，所谓“下拉刷新”是 JavaScript 驱动的 UI 行为，和数据更新是两个独立环节，但实践中必须手动串联。
下拉刷新不是 HTML 标准能力
HTML 规范里没有 pull-to-refresh 标签或原生属性。iOS Safari 15.4+ 和 Chrome 93+ 虽然支持 <body> 上的原生下拉回弹效果（仅视觉反馈），但它不会触发任何事件，也不自动加载新数据。
常见误解是给 <div> 加 ontouchstart 就算实现刷新——其实只是监听了手势起点，离“识别下拉动作→触发更新→回弹动画”差很远。
- 原生回弹只响应
<body>或<html>的 overscroll，且需禁用overscroll-behavior: none才可见 - 第三方库（如
pulltorefreshjs）本质是监听touchmove计算位移量，再调用你传入的回调 - Vue/React 项目中，
usePullToRefresh这类自定义 Hook 也只是封装了事件监听逻辑，不包含数据获取
数据更新必须显式调用 API 或状态变更
下拉动作和数据更新之间没有自动绑定。即使你监听到用户拉到底部，也得自己写逻辑去：fetch 新数据、setState、refetch 查询、或触发 swr.mutate 等。
立即学习“前端免费学习笔记（深入）”；
典型错误是只改了 UI 状态（比如显示 loading 图标），却忘了调用实际的数据接口：
const handleRefresh = () => {
setIsLoading(true);
// ❌ 忘了这句：fetch('/api/news').then(...).finally(() => setIsLoading(false))
};
- 如果用 SWR，要主动调用
mutate(key)或设revalidateOnFocus: false配合手动触发 - 在 React Query 中，应调用
queryClient.invalidateQueries(['list'])，而非仅重置isFetching - 滚动位置重置（如回到顶部）和数据更新无关，但用户预期两者同步，需手动
scrollTo({ top: 0 })
容易被忽略的边界问题
下拉刷新看似简单，真正在意体验时，几个点常被跳过：
- 快速连续下拉多次，可能并发触发多次请求 → 要加防抖（
useRef记录是否正在刷新）或用AbortController - 下拉过程中网络断开，loading 状态卡住 → 必须有
.catch()并setIsLoading(false) - 服务端返回空数组或无变化数据，UI 却仍显示“刷新成功” → 应比对前后数据长度/时间戳，决定是否更新 DOM
- PC 端鼠标拖拽无法触发，而用户可能真会这么试 → 若需兼容，得额外监听
mousedown + mousemove，或直接禁用 PC 端下拉逻辑
真正难的不是监听下拉，而是让整个链条——手势识别、状态管理、网络请求、错误处理、UI 反馈、滚动控制——在各种网络和操作节奏下都保持一致。很多 bug 出现在“以为刷新完成了”，其实只是 loading 消失了。
