移动端滚动加载更多需精准监听目标容器滚动并设预加载阈值（如50px），配合防抖（80–150ms，最后一次必执行）、状态控制与onunmounted清理，确保触底判断准确、不重复请求、无内存泄漏。
移动端滚动加载更多，核心是准确、稳定地判断“触底”，同时避免频繁触发、重复请求和卡顿。Vue 3 中不建议直接监听 window 的 scroll 事件做全局处理，而应聚焦于目标容器本身，并结合防抖、状态控制与 DOM 生命周期管理。
精准监听目标滚动容器
移动端触底依赖的是具体列表容器（如 <div class="list-container">）的滚动，而非整个页面。使用 <code>ref 获取容器元素后，监听其原生 scroll 事件：
- 确保容器设置了
overflow-y: auto或scroll，且高度固定或受限（否则无法触发滚动） - 避免用
body或html作为滚动主体——在 iOS Safari 和部分安卓 WebView 中，它们的scrollTop行为不可靠 - 优先监听容器自身，而不是
window，这样逻辑更可控，也适配position: fixed布局或嵌套滚动场景
触底判断要留出合理阈值
不能等 scrollTop + clientHeight === scrollHeight 才触发，因为用户手指松开后惯性滚动可能已结束，容易错过时机。应设置一个预加载阈值（如 50px）：
- 公式：
container.scrollTop + container.clientHeight >= container.scrollHeight - threshold - 阈值取值建议：30–80px，太小易误触，太大则加载滞后
- 对低分辨率设备可动态调整，例如
threshold = Math.min(50, window.innerHeight * 0.1)
必须加防抖，且推荐用“最后一次必执行”策略
滚动事件高频触发，不加限制会导致重复调用 loadMore。节流（throttle）在快速滑动时可能丢掉最后一次判断；防抖（debounce）更合适，但需确保“停止滚动后的最后一次回调一定执行”：
- 使用带
immediate: false且延迟时间较短（80–150ms）的防抖函数 - 关键点：防抖回调内不只做判断，还要检查
loading.value === false && !noMore.value再发起请求 - 手动在
onUnmounted清理事件监听，防止内存泄漏
加载状态与用户反馈要闭环
触底只是起点，体验好坏取决于后续交互是否清晰：
- 触发后立即将
loading.value = true，并禁用再次触发逻辑（如提前 return） - 请求成功后追加数据，更新
page.value++，重置loading.value = false - 若接口返回空数组或
total ，置 <code>noMore.value = true并显示“没有更多了” - 建议在列表底部固定展示加载提示（如
v-if="loading"的 loading 动画），避免用户反复上拉
不复杂但容易忽略。重点不在“能不能监听到”，而在于“什么时候该响应、响应几次、响应之后怎么收尾”。
