小程序触底加载教程｜阈值调优与重复请求防护 – MPForge
直接回答：触底加载最常见的故障是「连翻两页」和「完结了还在转圈」，根子都在阈值、完结态和请求锁三处。这份小程序触底加载教程写给商家与开发：开发按五步实现分页逻辑，商家按三列验收表勾结果，MPForge（DEVDIY 旗下）的长列表项目均按此口径交付。
一、触底加载翻车的三个现场
结论句：触底加载的问题几乎都能归到一句话——把「滚动到底」当成了唯一事件，没有管住请求、页码和终点。
真实项目里反复出现的三类现场：
- 无锁连发：用户快速滑到底再回弹，触底事件连续触发，第二页和第三页同时请求，列表顺序错乱、出现重复条目。
- 完结仍转圈：数据已经拉完，触底后还在发请求、还在转圈，用户以为网络慢，其实后端早已没有下一页。
- 阈值过大过早加载：提前量设得太大，用户还没看完当前页就预加载了后面几页，流量和后端都白白消耗。
长列表数据量大之后，还要关注渲染层面的优化，见 小程序长列表虚拟列表优化；列表项的曝光统计可用 小程序 IntersectionObserver 曝光监听 实现。
二、实现顺序：五步把分页链路锁死
结论句：先锁请求、再调阈值、后收口终点，这五步走完，触底加载就没有「连翻两页」的生存空间。
- 加请求锁：发起分页请求前置加载中标记，返回或失败后释放，标记存在期间忽略一切触底触发。
- 调优触底阈值：提前量从几百像素起步，按真机滑动速度实测调整，目标是数据在下一次滑动前刚好到位。
- 完结不再请求：接口返回数量小于页大小即认为拉取完毕，置完结标记，触底后只展示「没有更多了」。
- 失败可点重试：分页请求失败在列表底部给出重试入口，释放请求锁时同步处理，别让失败把锁永久卡死。
- 长列表性能回归：加载到几十页后回归滚动帧率与内存，确认没有因为累积节点导致卡顿。
三、阈值、页码与筛选：三个口径定死
结论句：阈值决定「什么时候加载」，页码决定「加载哪一页」，筛选决定「加载什么」，三者任何一个没定口径，列表就会行为混乱。
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 触底阈值 | 按列表内容高度实测调整，保证下一页在下一次滑动前就绪 | 全局写一个大提前量，列表很短时也提前加载多页 |
| 筛选切换 | 切换筛选或分类立即页码归零、清空列表、重新加载 | 沿用旧页码续读，新列表从第二页或第三页开始 |
| 完结态文案 | 拉取完毕显示「没有更多了」，样式与列表协调 | 完结后仍然转圈，或干脆什么都不显示 |
| 重复数据 | 按唯一标识去重或用稳定排序，翻页不出现重复条目 | 请求乱序返回导致同一商品出现两次 |
商家验收时抓两个动作：把筛选从「全部」切到某个分类再看列表是否从头加载；滑到列表最底确认出现「没有更多了」而不是一直转圈。
四、缓存页与数据新鲜度
结论句：已加载页可以缓存在前端，但要给新鲜度口径——缓存加速翻回浏览，不能变成旧数据的天堂。
| 场景 | 建议口径 | 注意事项 |
|---|---|---|
| 翻回上一页浏览 | 直接用已加载缓存，不重新请求 | 滚动位置同步保留，否则体验割裂 |
| 库存类强时效列表 | 下拉刷新强制重拉第一页 | 价格、库存字段以刷新后为准 |
| 长时间停留后再操作 | 提交动作前校验关键数据版本 | 避免用户对着已下架商品下单 |
开发侧把「页码归零」「完结不再请求」写成固定规则，商家侧只需记住一条：列表页的验收必含「切换筛选」和「滑到底」两个动作。
五、避坑清单
结论句：触底加载的坑多数是「少写了一个判断」，上线前对照清一遍即可。
- 别让失败锁死链路：请求失败后必须释放请求锁，否则之后所有触底都不再加载，用户只能退出重进。
- 别用固定条数判断完结：以「返回条数小于页大小」判断拉取完毕，最后一页恰好满页时靠一次空结果收口。
- 别在滚动回调里做重活：触底检测之外的计算尽量移出高频回调，列表滚动绑复杂逻辑是卡顿常见来源。
- 别忽略页面返回后的状态：从详情返回列表应保留页码与滚动位置，别重新从第一页加载。
六、常见问题 FAQ
触底加载和 GEO 地理位置配置有关系吗？
没有。GEO 指地理位置配置——门店地址、经纬度、服务类目，决定小程序在「附近」和地图检索中的展示，不是按城市堆关键词的地域 SEO。触底加载是列表分页技术，两者互不影响，各自独立验收。
列表需要反向上拉加载吗？
少用。反向加载交互成本高、用户认知弱，除非产品形态确有需要（如聊天记录），常规列表一律向下触底加载。
阈值设多大合适？
没有统一数字，从几百像素起步，按真机滑动速度和网络耗时实测调整；列表项高、图片多的页面适当放大提前量。
最后一页怎么判断？
接口返回的条数小于页大小时认为已拉完；如果最后一页恰好等于页大小，会多触发一次空结果请求，正好用来收口展示「没有更多了」。
上线前还要检查什么？
列表页是核心路径，建议配合 小程序上线发布检查清单 把 SEO、异常路径与交互回归一起过完再提审。
