Vue.js中用ref实现移动端滑动触底加载，核心是通过ref获取滚动容器并监听其scroll事件，结合scrollTop、clientHeight和scrollHeight判断是否接近底部（预留阈值），配合isLoading、hasMore等ref控制加载状态与防抖，确保兼容性与稳定性。

Vue.js 中用 ref 实现移动端滑动触底加载，核心是监听滚动容器的滚动事件，判断是否接近底部，并通过 ref 控制加载状态（如 loading、noMore），避免重复请求。

获取滚动容器并监听 scroll 事件

移动端触底判断不能依赖 window，而应监听内容容器（如

）。需用 ref 获取 DOM 元素，并在 onMounted 中绑定事件：

• 给容器添加 ref="containerRef"
• 使用 containerRef.value?.addEventListener('scroll', handleScroll)
• 注意：iOS Safari 滚动事件可能不触发，建议加 touchmove 或使用 passive: false 保证兼容性

准确判断是否触底

触底条件不是“滚动到底部”，而是“用户即将看到末尾内容”。常用公式：

container.scrollTop + container.clientHeight >= container.scrollHeight - threshold

• threshold 是提前触发距离（如 50px），提升用户体验
• 确保容器有明确高度且可滚动（overflow-y: auto，max-height 或固定高）
• 避免用 document.body.scrollTop，它在 iOS 和部分安卓 WebView 中不可靠

用 ref 管理加载状态与防抖

定义多个 ref 来协同控制行为：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 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）

不复杂但容易忽略细节——滚动容器样式、事件绑定时机、触底阈值和状态同步，才是稳定触底加载的关键。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！