应使用 Intersection Observer 或 scrollTop + clientHeight ≥ scrollHeight - threshold（阈值10~50px）判断触底，配合节流与 isLoading/noMore 状态守卫防重复请求，并在父组件用 concat 更新列表、$nextTick 后滚动到底部。

当使用 Vue.js 实现长列表（如聊天记录、评论流、日志等）并需要“滚动到底部自动加载更多”时，子组件（如 ScrollList）通常负责监听滚动、判断是否触底，并通过 $emit 通知父组件发起数据请求。关键在于：如何让 emit 的时机准确、防抖合理、状态可控，避免重复请求或丢失触发。

滚动监听与触底判断要稳定可靠

不能仅依赖 scrollHeight === scrollTop + clientHeight 这种简单等式——它在元素重绘、字体加载、动态高度内容（如图片未加载完）下容易误判。推荐使用 Intersection Observer API 或更健壮的滚动差值计算：

• 监听容器 scroll 事件，取 scrollTop + clientHeight >= scrollHeight - threshold（threshold 建议设为 10~50px，预留容错空间）
• 确保监听的是列表容器（如 <div class="list-container">），而非 <code>window，避免布局嵌套导致计算偏差
• 用 requestIdleCallback 或节流（如 Lodash 的 throttle，300ms）包裹判断逻辑，防止高频触发

emit 时机需配合加载状态控制

子组件不应在每次触底都无条件 this.$emit('loadMore')。应结合内部 loading 和 noMore 状态做守卫：


Element Plus UI Vue3
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
下载
• 定义 isLoading 和 noMore data 属性，在 emit 前校验：if (!this.isLoading && !this.noMore) { this.$emit('loadMore'); this.isLoading = true; }
• 父组件收到 loadMore 后，执行异步请求；成功后重置子组件 isLoading（可通过 v-model 或 ref 调用子组件方法），失败时也需手动恢复，避免“卡死”
• 若请求返回空数组或指定字段（如 hasNext: false），子组件应主动设置 noMore = true 并停止监听（可 removeEventListener 或用 v-if 卸载）

父组件接收 emit 后的数据合并与 DOM 更新

父组件响应 @loadMore 时，重点不是“发请求”，而是“如何把新数据自然拼接到列表末尾，且保持滚动位置合理”：

立即学习“前端免费学习笔记（深入）”；

• 使用 Array.concat() 或展开运算符追加数据（this.list = [...this.list, ...newItems]），避免直接 push 导致 Vue 响应式失效（尤其 SSR 或 Proxy 兼容场景）
• 加载完成后，调用 this.$nextTick() 再滚动到底部（如 container.scrollTop = container.scrollHeight），确保新 DOM 已渲染
• 若列表支持“上拉加载更多”，则需区分方向；当前场景是“滚动到底部”，所以只关心底部追加，无需操作 scrollTop 顶部

边界情况要显式处理

真实项目中常见问题需提前兜底：

• 首次进入页面时列表为空：可由父组件控制，初始加载后才挂载 ScrollList，或子组件 watch list.length 自动触发第一次 loadMore
• 快速连续滚动多次触底：靠子组件的 isLoading 守卫 + 节流已覆盖；额外建议在父组件请求时加 AbortController，取消前序未完成请求
• 移动端 Safari 滚动不触发：确保容器有 overflow-y: auto 且 -webkit-overflow-scrolling: touch（iOS 15+ 可省略）