上拉加载需监听滚动接近底部时触发，但须加防抖和loading状态锁防重复请求；用游标分页（last_id）替代页码，确保数据严格递增；loading用固定高占位块，无更多数据须等接口返回data.length===0才显示；ios微信应改用intersectionobserver或touchend后检查位置。
上拉加载触发时怎么判断该不该请求下一页
核心是监听滚动位置是否接近容器底部，但不能每次滚动都发请求——得加防抖和状态锁。常见错误是没设 loading 标志位，导致快速上拉时重复触发多次 fetch，后端返回乱序或重复数据。
- 用
scrollHeight - scrollTop 判断“快到底了”，+50 是提前触发缓冲，避免用户拉到最底才动（体验卡） - 必须配合
isFetching === false && hasMore === true双条件：前者防重复请求，后者防最后一页还死循环拉 - 移动端要注意
document.body.scrollTop在 iOS Safari 下可能为 0，得优先用document.documentElement.scrollTop
分页参数怎么传给后端才不丢页、不跳页
别用页码 page=2，改用游标式（cursor-based）分页：传上一页最后一条的 id 或 created_at 时间戳。页码式在高并发插入/删除时极易漏数据或重复。
- 前端存
lastId（比如lastId: 12345），下一次请求带?last_id=12345&limit=20 - 后端 SQL 要写成
WHERE id > ? ORDER BY id LIMIT ?，确保严格递增且可复现 - 首次加载传
last_id=null或不传，后端默认查最大 ID 往前取；别用page=1启动，否则第二页可能从第 21 条开始，中间缺了第 20 条被删的记录
加载中和无更多数据的状态怎么渲染才不闪、不误触
DOM 插入时机不对会导致布局抖动或点击穿透。典型问题是把 loading 元素直接 appendChild 到列表末尾，结果重排触发滚动条跳动，用户手还没抬起来又触发第二次上拉。
- loading 提示用固定高度的占位块：
<div class="loading" style="height: 40px;"></div>，加载完成再替换成真实内容 - “没有更多”提示要等请求返回
data.length === 0才显示，而不是一进页面就硬塞一个<p>已到底</p>——否则空列表会误显“到底”，实际是查无数据 - 加载中禁用上拉监听：用
removeEventListener('scroll', handler)或加闭包开关变量，别只靠 CSSpointer-events: none，它挡不住 touchmove
为什么 iOS 微信里上拉加载经常失效或延迟
微信内置浏览器对 scroll 事件节流极狠，尤其在 position: fixed 容器里滚动时，scrollTop 长时间不更新。这不是你代码错，是环境限制。
- 不要监听
window.onscroll，改用IntersectionObserver监控底部占位元素是否进入视口（兼容 iOS 11.3+） - 降级方案：在
touchend后延时 16ms 主动检查一次位置，比纯 scroll 更可靠 - 避免在
body上设overscroll-behavior: contain，微信 X5 内核会吃掉部分 touch 事件，导致无法触发
真正难的不是拉到底触发，而是让每一次加载都精准对应“下一批唯一数据”，游标、状态锁、环境适配这三块少一个，线上就会出现白屏、重复、卡死——它们全得在 DOM 和网络之间掐准毫秒级节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
