下拉刷新必须包含发起请求、接收新数据、替换dom、重置状态四步，否则仅为无效动效；默认应全量覆盖而非追加，需防缓存并反馈真实更新。
HTML下拉刷新本身不强制要求数据更新，但它只有在触发真实数据更新时才有实际意义；否则只是个视觉动效，用户会感知为“假刷新”。
下拉刷新不等于自动重载页面
很多人误以为绑了 touchstart + touchend 就算实现下拉刷新，其实那只是手势识别。真正构成“刷新”，必须包含：发起请求 → 接收新数据 → 替换或合并 DOM → 重置状态。缺任何一环，用户松手后没反馈，就会反复下拉、怀疑功能失效。
- 只改
refreshHeader.style.height而不调用fetch()或axios.get()，属于空转 - 请求发出去但没处理响应（比如忘了
.then()或await），会导致 loading 状态卡住 - 更新完 DOM 后没重置
isPulling = false，下次下拉可能直接跳过判断逻辑
数据更新必须区分“覆盖”和“追加”
下拉刷新默认语义是“重新获取最新全量数据”，不是“加载更多”。如果错误地把刷新逻辑写成 list.push(...newItems)，会出现重复项、时间线错乱等问题。
- 正确做法是先清空容器：
container.innerHTML = ''或container.replaceChildren(...newList) - 若业务需要保留当前滚动位置（比如刷新后不跳回顶部），需在清空前记录
scrollTop，更新后再恢复 - 服务端接口应返回完整数据集（非增量），或至少带
last_updated_at时间戳用于客户端比对
避免“刷新成功但数据没变”的体验陷阱
用户下拉后看到 loading 消失、提示“更新完成”，结果列表一模一样——这是最伤信任的场景。根本原因常是缓存或接口未返回真实新数据。
- 给请求加防缓存参数：
fetch('/api/data?t=' + Date.now())或设置cache: 'no-cache' - 后端接口务必校验
If-None-Match/Etag，但前端不能依赖它来跳过 DOM 更新 - 至少显示轻量反馈：比如更新时间戳
<small>更新于 <span id="last-time"></span></small>，并在 JS 中实时写入new Date().toLocaleTimeString()
第三方库里数据更新的隐含约定
像 pulltorefresh.js 或 iscroll 的 onRefresh 回调，只是给你一个执行时机，不帮你管数据流。你传进去的函数里漏掉 await、没 catch 错误、或忘记调用 instance.finishRefresh()，都会导致 UI 卡在 loading 状态。
-
pulltorefresh.js必须手动调用instance.finishRefresh()，否则下拉动画不会收起 -
iscroll的scroll.on('refresh', ...)是监听器，不是钩子；真正触发要靠scroll.refresh()+ 手动控制pullDownOnRefresh - Vant 的
van-pull-refresh组件中，loading状态由v-model:loading控制，必须双向绑定，且onRefresh里要显式赋值loading = true→ 请求 →loading = false
真正难的从来不是“怎么让 header 动起来”，而是确保每次下拉都带来可信的新数据——这要求前后端对缓存策略、接口幂等性、错误重试都有共识。动效可以抄，数据链路得自己焊牢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
