尧图网页设计 
Vue 仿抖音无限加载列表滑动分页从零实现【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyinGitHub_Trending/do/douyin 是基于 Vue3 Pinia 的仿抖音移动端短视频应用对前端最有复用价值的是它封装的一套无限加载滑动列表传入一个请求函数分页、触底预加载、加载态就都交给了组件。无限加载到底解决什么痛点做信息流页面最容易卡住的是三件事每页取多少条、什么时候算没有更多、请求期间给用户什么反馈。无限加载的思路一次性解决它们数据按页拆好滚到接近底部时再取下一页请求途中给出加载指示避免用户误以为页面卡死。项目里的长视频 Tab、社区 Tab 都是靠它撑起来的页面侧只需要写怎么渲染一条数据。容器和数据控制器怎么分工功能被拆成两半各管一段。滑动容器 Scroll.vue 只管滚动区域、手势监听和事件抛出它不知道数据是视频还是图片数据控制器 ScrollList.vue 只管列表状态、页码推进和请求时机不碰任何 DOM 事件。两者靠一层传参协作控制器把 loading 状态传给容器同时监听容器向上抛出的事件。需要瀑布流时在插槽里换用 WaterfallList.vue 渲染即可分页逻辑一行不用改。无限加载三步走预加载、拼接、刷新第一步判断什么时候该取下一页。容器在每次滚动时计算距底部的剩余距离进入 60px 内就抛出 pulldown 事件。比滚到最底提前一点触发用户看到的永远是内容在续而不是空白在等// 距底部 60px 视为本页快看完了 if (this.wrapper.scrollHeight - this.wrapper.clientHeight this.wrapper.scrollTop 60) { this.$emit(pulldown) }第二步带锁请求成功后往旧列表尾部追加。一次请求在途时后续触底事件直接丢弃杜绝并发重复请求拿到新数据后只对数组做增量追加Vue 据此只插入新增节点老内容不重渲染滚动位置也不跳列表再长也不发虚// 已有请求在途新的直接丢弃 if (state.loading) return state.loading true const result await props.api({ pageNo: state.pageNo, pageSize: state.pageSize }) state.loading false if (result.success) { state.list state.list.concat(result.data.list) // 只追加不替换 }第三步下拉刷新预留。容器给 useRefresh 传 true 后会启用触摸分支scrollTop 为 0 时开始拖动就记录起点内容跟着手指下移但位移有上限松手时若确实发生过拖动就抛出 refresh 事件由页面自己决定回零页码、重新取数。回弹手感靠一段 CSS 过渡实现不需要物理引擎。 上手三步1. 克隆并运行。git clone https://gitcode.com/GitHub_Trending/do/douyin cd douyin npm install npm run dev2. 传一个请求函数就能用起来。函数会收到{ pageNo, pageSize }需要返回{ success, data: { list, total } }。首页长视频 Tab 的 LongVideo.vue 就是这个 Vue 滑动列表的真实用法ScrollList classScroll :apirecommendedLongVideo template #default{ list } div v-for(item, i) in list :keyi classitem video :srcitem.video.play_addr.url_list[0] / p{{ item.desc }}/p /div /template /ScrollList3. 参数与事件速查。名称类型说明apiFunction请求函数以 pageNo/pageSize 调用#default 插槽Array通过 { list } 拿到当前列表数据loading / fullLoadingBoolean底部加载指示 / 首屏全屏加载pulldownevent滚动接近底部60px 阈值时抛出ScrollList 已内部绑定 还能往哪儿改三个可落地的方向虚拟滚动列表条目只增不减超长页面节点会很多。长视频页已经在用 IntersectionObserver 暂停屏外视频同一思路可以继续做到只渲染可视区条目上。横向滑动容器目前只处理纵向touch-action: pan-y想做横滑轮播只需改触摸轴和阈值判断改动都集中在 scroll() 与 move() 两个函数里。错误重试请求失败目前只弹提示需要用户手动再触发可以在 getData() 的失败分支加一个重试按钮顺带处理空列表时的占位展示。想动手改的话本地克隆后自行扩展即可git clone https://gitcode.com/GitHub_Trending/do/douyin。建议先把 pageSize 改成 2观察列表逐条长出来的过程再写一个偶发失败的请求函数看看组件在异常下表现如何。【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Vue 仿抖音无限加载列表：滑动分页从零实现
Vue 仿抖音无限加载列表滑动分页从零实现【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyinGitHub_Trending/do/douyin 是基于 Vue3 Pinia 的仿抖音移动端短视频应用对前端最有复用价值的是它封装的一套无限加载滑动列表传入一个请求函数分页、触底预加载、加载态就都交给了组件。无限加载到底解决什么痛点做信息流页面最容易卡住的是三件事每页取多少条、什么时候算没有更多、请求期间给用户什么反馈。无限加载的思路一次性解决它们数据按页拆好滚到接近底部时再取下一页请求途中给出加载指示避免用户误以为页面卡死。项目里的长视频 Tab、社区 Tab 都是靠它撑起来的页面侧只需要写怎么渲染一条数据。容器和数据控制器怎么分工功能被拆成两半各管一段。滑动容器 Scroll.vue 只管滚动区域、手势监听和事件抛出它不知道数据是视频还是图片数据控制器 ScrollList.vue 只管列表状态、页码推进和请求时机不碰任何 DOM 事件。两者靠一层传参协作控制器把 loading 状态传给容器同时监听容器向上抛出的事件。需要瀑布流时在插槽里换用 WaterfallList.vue 渲染即可分页逻辑一行不用改。无限加载三步走预加载、拼接、刷新第一步判断什么时候该取下一页。容器在每次滚动时计算距底部的剩余距离进入 60px 内就抛出 pulldown 事件。比滚到最底提前一点触发用户看到的永远是内容在续而不是空白在等// 距底部 60px 视为本页快看完了 if (this.wrapper.scrollHeight - this.wrapper.clientHeight this.wrapper.scrollTop 60) { this.$emit(pulldown) }第二步带锁请求成功后往旧列表尾部追加。一次请求在途时后续触底事件直接丢弃杜绝并发重复请求拿到新数据后只对数组做增量追加Vue 据此只插入新增节点老内容不重渲染滚动位置也不跳列表再长也不发虚// 已有请求在途新的直接丢弃 if (state.loading) return state.loading true const result await props.api({ pageNo: state.pageNo, pageSize: state.pageSize }) state.loading false if (result.success) { state.list state.list.concat(result.data.list) // 只追加不替换 }第三步下拉刷新预留。容器给 useRefresh 传 true 后会启用触摸分支scrollTop 为 0 时开始拖动就记录起点内容跟着手指下移但位移有上限松手时若确实发生过拖动就抛出 refresh 事件由页面自己决定回零页码、重新取数。回弹手感靠一段 CSS 过渡实现不需要物理引擎。 上手三步1. 克隆并运行。git clone https://gitcode.com/GitHub_Trending/do/douyin cd douyin npm install npm run dev2. 传一个请求函数就能用起来。函数会收到{ pageNo, pageSize }需要返回{ success, data: { list, total } }。首页长视频 Tab 的 LongVideo.vue 就是这个 Vue 滑动列表的真实用法ScrollList classScroll :apirecommendedLongVideo template #default{ list } div v-for(item, i) in list :keyi classitem video :srcitem.video.play_addr.url_list[0] / p{{ item.desc }}/p /div /template /ScrollList3. 参数与事件速查。名称类型说明apiFunction请求函数以 pageNo/pageSize 调用#default 插槽Array通过 { list } 拿到当前列表数据loading / fullLoadingBoolean底部加载指示 / 首屏全屏加载pulldownevent滚动接近底部60px 阈值时抛出ScrollList 已内部绑定 还能往哪儿改三个可落地的方向虚拟滚动列表条目只增不减超长页面节点会很多。长视频页已经在用 IntersectionObserver 暂停屏外视频同一思路可以继续做到只渲染可视区条目上。横向滑动容器目前只处理纵向touch-action: pan-y想做横滑轮播只需改触摸轴和阈值判断改动都集中在 scroll() 与 move() 两个函数里。错误重试请求失败目前只弹提示需要用户手动再触发可以在 getData() 的失败分支加一个重试按钮顺带处理空列表时的占位展示。想动手改的话本地克隆后自行扩展即可git clone https://gitcode.com/GitHub_Trending/do/douyin。建议先把 pageSize 改成 2观察列表逐条长出来的过程再写一个偶发失败的请求函数看看组件在异常下表现如何。【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考