Vue.js无限加载核心是精准判断触底时机并防重复请求：监听可滚动容器的scroll事件，通过scrollTop+clientHeight≥scrollHeight-阈值判断；设loading和noMore状态，请求前守卫，成功后更新状态。
Vue.js 实现无限加载，核心是监听滚动位置，当用户接近页面底部时触发数据加载。关键不在“无限”，而在“何时加载”和“如何防重复触发”。
监听滚动并判断触底时机
不能直接监听 window.onscroll 并每次计算，容易频繁触发。推荐用 IntersectionObserver 或节流后的 scroll 事件。
更轻量实用的做法：监听容器（如列表父元素）的 scroll 事件，结合 scrollTop + clientHeight >= scrollHeight - 某个阈值（如 100px） 判断是否该加载。
- 若列表内容在
<div class="list-container">内，用ref获取该容器 DOM，在mounted中绑定事件 - 阈值留出缓冲距离，避免因网络延迟导致用户已到底部却没触发
- 移动端需注意
body滚动可能被禁用，务必确保监听的是实际可滚动的容器
控制加载状态与防重复请求
一次加载未完成时，再次触底不应发起新请求——否则易造成数据错乱或资源浪费。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 定义
loading: false和noMore: false两个响应式状态 - 在加载函数开头加守卫：
if (loading || noMore) return - 请求开始设
loading = true，成功后重置，并根据返回数据长度判断是否还有下一页（如res.data.length → <code>noMore = true）
追加数据而非覆盖，保持滚动体验
新数据应 push 到现有列表末尾，而不是 data = [...data, ...newData] 这种赋值——后者会重置整个列表 DOM，造成滚动跳动或焦点丢失。
- 使用
this.list.push(...newData)或this.list = this.list.concat(newData) - 若需保留加载前的滚动位置（比如用户中途暂停再滚动），可记录
scrollTop，加载后尝试恢复（但多数场景无需强求） - 配合
key的合理使用（如用唯一 ID 作v-for的 key），避免 Vue 错误复用节点
错误处理与用户反馈
网络失败或接口异常时，不能静默吞掉错误，要给用户明确提示，并允许重试。
- 加载失败后设
loading = false，同时显示「加载失败」按钮或文字 - 提供手动重试入口（如点击文字重新触发加载函数）
- 首次加载失败可展示空状态；后续失败建议只提示，不清空已有数据
