vue.js无限加载核心是精准判断触底时机并防重复请求：监听可滚动容器的scroll事件，通过scrolltop+clientheight≥scrollheight-阈值判断；设loading和nomore状态，请求前守卫，成功后更新状态。

Vue.js 实现无限加载，核心是监听滚动位置，当用户接近页面底部时触发数据加载。关键不在“无限”，而在“何时加载”和“如何防重复触发”。

监听滚动并判断触底时机

不能直接监听 window.onscroll 并每次计算，容易频繁触发。推荐用 IntersectionObserver 或节流后的 scroll 事件。

更轻量实用的做法：监听容器（如列表父元素）的 scroll 事件，结合 scrollTop + clientHeight >= scrollHeight - 某个阈值（如 100px） 判断是否该加载。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

• 若列表内容在 <div class="list-container"> 内，用 <code>ref 获取该容器 DOM，在 mounted 中绑定事件
• 阈值留出缓冲距离，避免因网络延迟导致用户已到底部却没触发
• 移动端需注意 body 滚动可能被禁用，务必确保监听的是实际可滚动的容器

控制加载状态与防重复请求

一次加载未完成时，再次触底不应发起新请求——否则易造成数据错乱或资源浪费。

• 定义 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，同时显示「加载失败」按钮或文字
• 提供手动重试入口（如点击文字重新触发加载函数）
• 首次加载失败可展示空状态；后续失败建议只提示，不清空已有数据