html原生不支持下拉刷新，需用touch事件结合scrolltop判断顶部状态实现；pulldownaction中须控制加载态、安全更新数据源与dom，并确保滚动上下文一致。
HTML 原生不支持下拉刷新，也就没有内置的数据更新机制；所有“下拉刷新 + 数据更新”都得靠 JavaScript 手动实现。
为什么 window.addEventListener('scroll') 不能直接做下拉刷新
移动端浏览器的滚动事件在顶部时不会触发负向 scrollTop，且默认会触发页面回弹（overscroll），无法可靠捕获“下拉动作”。单纯监听 scroll 容易误判、卡顿、兼容性差。
- 必须结合
touchstart/touchmove/touchend捕获手指位移 - 需判断是否处于页面顶部（
document.documentElement.scrollTop === 0） - 要防抖节流，避免高频触发导致重复请求
- iScroll、Pulltorefresh.js 等库内部正是靠这套逻辑封装的
pullDownAction 函数里怎么安全更新数据
这不是一个单纯的“发请求+塞 DOM”过程，关键在于状态控制和 DOM 更新时机。
- 进入刷新前，先禁用下拉区域（比如加
pointer-events: none或设disabled属性），防止用户连点 - 请求发起后立即显示 loading 提示（例如在 header 插入
<div class="refresh-loading">加载中…</div>） - 成功回调里：先更新数据源（如
dataList = newData），再重绘列表（renderList()或innerHTML替换），最后调用finishPullDown()（如果是 iScroll）或手动重置偏移量 - 失败时要恢复 UI 状态，并提示错误（不能让 loading 一直转）
更新完数据，DOM 列表没刷新？常见原因
不是数据没变，而是 DOM 没被正确替换或复用，尤其在使用 innerHTML 或虚拟列表时容易出问题。
- 用
innerHTML = ''清空再拼接字符串时，确保新 HTML 包含完整结构（比如每个<li>都有闭合标签） - 若用
document.createElement动态添加，记得appendChild到正确父容器，且不要漏掉textContent或dataset赋值 - Vue/React 等框架中，直接改数组引用（如
list.length = 0）不会触发响应式更新，要用list.splice(0)或赋新数组 - 滚动容器高度变化后，iScroll 实例可能需要手动调用
scroller.refresh()
最常被忽略的一点：下拉刷新区域（通常是 fixed 定位的 header）和内容区的滚动容器必须是同一个 scroll context；混用 body 和 div#container 滚动时，位移计算和事件绑定就全乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
