Vue.js中用ref实现移动端滑动触底加载，核心是通过ref获取滚动容器并监听其scroll事件，结合scrollTop、clientHeight和scrollHeight判断是否接近底部（预留阈值），配合isLoading、hasMore等ref控制加载状态与防抖，确保兼容性与稳定性。
Vue.js 中用 ref 实现移动端滑动触底加载，核心是监听滚动容器的滚动事件，判断是否接近底部，并通过 ref 控制加载状态（如 loading、noMore），避免重复请求。
获取滚动容器并监听 scroll 事件
移动端触底判断不能依赖 window，而应监听内容容器（如 <div class="list-container">）。需用 <strong>ref</strong> 获取 DOM 元素，并在 <code>onMounted 中绑定事件：
- 给容器添加
ref="containerRef" - 使用
containerRef.value?.addEventListener('scroll', handleScroll) - 注意：iOS Safari 滚动事件可能不触发，建议加
touchmove或使用passive: false保证兼容性
准确判断是否触底
触底条件不是“滚动到底部”，而是“用户即将看到末尾内容”。常用公式：
container.scrollTop + container.clientHeight >= container.scrollHeight - threshold
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
-
threshold是提前触发距离（如 50px），提升用户体验 - 确保容器有明确高度且可滚动（
overflow-y: auto，max-height或固定高） - 避免用
document.body.scrollTop，它在 iOS 和部分安卓 WebView 中不可靠
用 ref 管理加载状态与防抖
定义多个 ref 来协同控制行为：
-
const isLoading = ref(false)：防止重复请求 -
const hasMore = ref(true)：标识是否还有数据可加载 -
const isReachingEnd = ref(false)：临时标记正在检测触底（可选） - 在
handleScroll中先检查!isLoading.value && hasMore.value再触发加载
加载完成后的状态更新与边界处理
请求返回后需及时更新 ref 状态，并重置检测逻辑：
- 成功追加数据后：
isLoading.value = false - 若接口返回空数组或
next_page === null：hasMore.value = false - 可选：在加载前记录
lastScrollTop，避免快速滚动多次触发 - 组件卸载前记得移除事件监听（
onBeforeUnmount）
不复杂但容易忽略细节——滚动容器样式、事件绑定时机、触底阈值和状态同步，才是稳定触底加载的关键。
