上拉加载需精准控制状态同步与边界：用document.documentelement.scrolltop加阈值（如-100px）判断触底，避免误触发；首屏不足时须手动检查scrollheight。
上拉加载的 loading 效果不是加个“加载中…”文字就完事，关键在「状态同步」和「边界控制」——loading 显示时机、隐藏时机、是否可再次触发，三者必须严格对齐真实请求生命周期，否则用户会猛点、重复请求、看到空白或错乱数据。
滚动到底部时如何准确触发 loading 显示
靠 window.innerHeight + window.scrollY >= document.body.scrollHeight 判断容易误触，尤其在移动端小屏或页面高度动态变化（比如图片懒加载后撑开）时。实际应预留阈值，并统一用 document.documentElement 获取滚动值，避免 IE/旧 Safari 的 body.scrollTop 兼容问题。
- 用
document.documentElement.scrollTop替代window.scrollY，兼容性更稳 - 阈值建议设为
-100（即距离底部还有 100px 就开始加载），而不是0，防止滑动惯性导致“刚看到底就收手”而漏触发 - 首次进入页面时，如果内容不足一屏，
scroll事件根本不会触发——得手动检查一次if (document.documentElement.scrollHeight ，主动调用加载逻辑
fetch 请求中怎么避免 loading 状态错乱
用户快速上滑两次，可能发起两个 fetch，后一个先返回，把前一个的数据覆盖掉；或者 loading 显示了，但请求被 abort 或超时，状态却没重置。核心是把 loading 和请求绑定在同一控制流里，不能靠全局变量硬塞。
- 每次请求前设
isLoading = true，并立即更新 DOM：loadingDiv.style.display = 'block' - 在
fetch().then()和.catch()两个分支末尾都执行isLoading = false; loadingDiv.style.display = 'none'，确保无论成功失败都收口 - 用
AbortController配合signal参数，在新请求发起时 abort 上一个未完成的请求，防止脏数据写入 - 别在
then里直接拼接innerHTML += ...，改用insertAdjacentHTML('beforeend', htmlStr)，避免重绘整个容器
后端返回空数据时 loading 该不该隐藏
loading 隐藏 ≠ 数据加载完成，而是「本次请求已结束」。如果后端返回 { items: [], has_more: false }，说明确实到底了，可以隐藏 loading 并禁用后续触发；但如果返回 { items: [], error: "timeout" } 或网络直接断开，loading 必须保持可见，按钮也要恢复可点击，否则用户以为功能失效。
- 只信任后端明确返回的
has_more字段来决定是否还能继续加载，不靠items.length === 0做判断 - 网络错误（
fetchreject）、HTTP 非 2xx、JSON 解析失败，都属于「请求结束但未成功」，需保留 loading 显示，并给出轻量提示（如loadingDiv.textContent = '加载失败，点击重试'） - 按钮点击重试时，要重新设置
isLoading = false，否则会卡死在不可点击状态
移动端手指滑动松手后 loading 才出现？
这是典型的 scroll 事件节流不当导致的延迟感知。iOS Safari 和部分安卓 WebView 中，scroll 事件在手指松开后才批量触发，中间有几百毫秒空档，用户已经滑到低处，但 JS 还没反应过来。
- 不要用
setTimeout或requestIdleCallback延迟检测，必须在每次scroll回调里实时计算 - 加上
passive: false选项：window.addEventListener('scroll', handler, { passive: false })，允许 handler 内部调用preventDefault（虽然这里不用，但能提升事件响应优先级） - 更稳妥的做法是监听
touchmove作为补充：当touchmove检测到向上滑动趋势，且当前已接近底部时，提前预加载，而不是等scroll触发
最常被忽略的其实是 loading 的「退出条件」——它不只是一个视觉反馈，而是整个加载流程的状态出口。只要任何一环没对齐（比如请求 abort 了但 isLoading 没重置、后端字段缺失导致 has_more 默认 true、移动端 touchend 后没补检一次位置），loading 就会卡住、消失、或反复闪现。这些细节不在代码行数里，而在每一次请求与 DOM 更新的衔接点上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
