如何让列表滑个不停仿抖音无限滚动与无限加载组件完整拆解【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin手指向下一滑新视频已经备好这是短视频流的核心体验。开源项目 douyin 用 Vue 3 复刻了这套无限滚动与下拉刷新把无限加载封装成可复用的组件。先让无限列表组件跑起来 ScrollList 负责接管数据你只需把请求函数交给它渲染交给插槽ScrollList :apirecommendedShop template #default{ list } ShopItem v-foritem in list :keyitem.id :gooditem / /template /ScrollList这段最小用法取自 src/pages/shop/Shop.vue组件本体在 src/components/ScrollList.vue。参数与事件就这几样参数类型说明apiFunction数据请求函数组件传入pageNo/pageSize你返回{ success, data: { list, total } }loadingBoolean请求进行中列表底部出现加载指示fullLoadingBoolean为 true 时加载指示铺满全屏用于首屏事件触发时机pulldown滚动位置接近底部请求下一页refresh在顶部下拉越过阈值重置重新拉取实际跑起来是这个效果分页与加载锁数据是怎么续上来的src/components/ScrollList.vue 里四个状态字段管着整条加载链路list是已经渲染出来的数据pageNo记录当前到第几页total是服务端报出的总条数用来判断还有没有下一页loading标记是否正有请求在飞。loading就是加载锁像电梯里的关门按钮按下一瞬间门开始关在关完之前再按都无效。请求进行中后来的pulldown会被if (state.loading) return直接拦下你再怎么快速滑动也不会有第二个请求发出去。什么时候该加载下一页组件不等你滑到底而是提前 60px 就触发if (this.wrapper.scrollHeight - this.wrapper.clientHeight this.wrapper.scrollTop 60) { this.$emit(pulldown) }出处是 src/components/Scroll.vue 的 scroll 方法。为什么提前一点请求需要时间真滑到底再发用户就得盯着加载圈干等提前发手指触底时数据往往已经到位了。数据回来后用的是state.list.concat(res.data.list)增量拼接而不是整表替换。增量追加让 Vue 的 diff 只比对新增节点已有 DOM 原封不动整表替换则每条都要重新走一遍协调更新量差距明显。触摸事件与下拉刷新手指那头发生了什么数据续上来了再看手指那头。src/components/Scroll.vue 的三个方法构成了下拉刷新touchmove时只有scrollTop为 0 才记下触摸起点startMoveY之后每帧用当前pageY减起点算出位移再经distance - 40 10 ? distance - 40 : 10把视觉位移钳制在 10px 以内——拉再狠画面也只让出 10pxtouchend时只有一开始就在顶部且确实拖过distance 非空且scrollTop 0才emit(refresh)列表不在顶部时怎么拉都不会误触发。松手后的回弹靠 transform 位移加一段 300ms 过渡完成transition-duration: this.refresh ? 300ms : 0ms, transform: translate3d(0px, ${this.distance ! null ? this.distance : -40}px, 0)这 10px 的位移加 300ms 的缓回就是下拉时内容有跟手指走、又弹回来的体感来源加载状态让用户看见系统在干活 无限加载中最糟的体验是用户不知道发生了什么所以组件对三种时机各有交代首屏用full-loading由!state.list.length推得显示全屏 Loading滚动加载时loading为 true列表底部出现小的加载指示拉完则当total ! 0 total list.length时显示 NoMore明确告诉用户没有更多了。下拉时的物理反馈也是同一思路一点点看得见的位移等于一句你的手势我收到了。从无限加载到虚拟滚动再往前一步 scroll事件触发频率极高好在有加载锁兜底——pulldown触发多少次最多只放行一次请求状态锁本身就完成了频率控制不必再额外写节流。当列表长到几百个 DOM 节点开始拖慢渲染下一步就是虚拟滚动只渲染视口内的条目可以用IntersectionObserver监听条目进出可视区来增删节点。项目已预留 src/components/WaterfallList.vue它把列表按奇偶下标拆成两列可直接嵌进 ScrollList 做瀑布流无限加载另有两个值得做的方向给 Scroll 加方向开关支持横向滚动getData失败分支目前只弹查询失败提示加个重试按钮容错会更完整。调参与避坑清单 项建议预加载阈值默认 60px 是折中值弱网可上调到 100~200强网降到 30pageSize默认 10 条偏大增加首屏渲染成本偏小请求更频繁按条目高度权衡fixedHeight需要把滚动位置同步给外部 UI 时传具体数值px否则保持默认 -1useRefresh为 true 才进入绑定触摸事件的模板分支用不到就别开刷新语义refresh会把pageNo归零并整表替换和追加加载是两条路径别混用把Scroll 管手势、ScrollList 管数据拆开后无限加载就从一次性实现变成了可复用能力换一个api任何列表场景都能接上。想深入细节可以git clone https://gitcode.com/GitHub_Trending/do/douyin拉取完整源码对照首页视频流与 src/pages/shop/ 商城推荐两个场景一起读。【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何让列表滑个不停？仿抖音无限滚动与无限加载组件完整拆解
如何让列表滑个不停仿抖音无限滚动与无限加载组件完整拆解【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin手指向下一滑新视频已经备好这是短视频流的核心体验。开源项目 douyin 用 Vue 3 复刻了这套无限滚动与下拉刷新把无限加载封装成可复用的组件。先让无限列表组件跑起来 ScrollList 负责接管数据你只需把请求函数交给它渲染交给插槽ScrollList :apirecommendedShop template #default{ list } ShopItem v-foritem in list :keyitem.id :gooditem / /template /ScrollList这段最小用法取自 src/pages/shop/Shop.vue组件本体在 src/components/ScrollList.vue。参数与事件就这几样参数类型说明apiFunction数据请求函数组件传入pageNo/pageSize你返回{ success, data: { list, total } }loadingBoolean请求进行中列表底部出现加载指示fullLoadingBoolean为 true 时加载指示铺满全屏用于首屏事件触发时机pulldown滚动位置接近底部请求下一页refresh在顶部下拉越过阈值重置重新拉取实际跑起来是这个效果分页与加载锁数据是怎么续上来的src/components/ScrollList.vue 里四个状态字段管着整条加载链路list是已经渲染出来的数据pageNo记录当前到第几页total是服务端报出的总条数用来判断还有没有下一页loading标记是否正有请求在飞。loading就是加载锁像电梯里的关门按钮按下一瞬间门开始关在关完之前再按都无效。请求进行中后来的pulldown会被if (state.loading) return直接拦下你再怎么快速滑动也不会有第二个请求发出去。什么时候该加载下一页组件不等你滑到底而是提前 60px 就触发if (this.wrapper.scrollHeight - this.wrapper.clientHeight this.wrapper.scrollTop 60) { this.$emit(pulldown) }出处是 src/components/Scroll.vue 的 scroll 方法。为什么提前一点请求需要时间真滑到底再发用户就得盯着加载圈干等提前发手指触底时数据往往已经到位了。数据回来后用的是state.list.concat(res.data.list)增量拼接而不是整表替换。增量追加让 Vue 的 diff 只比对新增节点已有 DOM 原封不动整表替换则每条都要重新走一遍协调更新量差距明显。触摸事件与下拉刷新手指那头发生了什么数据续上来了再看手指那头。src/components/Scroll.vue 的三个方法构成了下拉刷新touchmove时只有scrollTop为 0 才记下触摸起点startMoveY之后每帧用当前pageY减起点算出位移再经distance - 40 10 ? distance - 40 : 10把视觉位移钳制在 10px 以内——拉再狠画面也只让出 10pxtouchend时只有一开始就在顶部且确实拖过distance 非空且scrollTop 0才emit(refresh)列表不在顶部时怎么拉都不会误触发。松手后的回弹靠 transform 位移加一段 300ms 过渡完成transition-duration: this.refresh ? 300ms : 0ms, transform: translate3d(0px, ${this.distance ! null ? this.distance : -40}px, 0)这 10px 的位移加 300ms 的缓回就是下拉时内容有跟手指走、又弹回来的体感来源加载状态让用户看见系统在干活 无限加载中最糟的体验是用户不知道发生了什么所以组件对三种时机各有交代首屏用full-loading由!state.list.length推得显示全屏 Loading滚动加载时loading为 true列表底部出现小的加载指示拉完则当total ! 0 total list.length时显示 NoMore明确告诉用户没有更多了。下拉时的物理反馈也是同一思路一点点看得见的位移等于一句你的手势我收到了。从无限加载到虚拟滚动再往前一步 scroll事件触发频率极高好在有加载锁兜底——pulldown触发多少次最多只放行一次请求状态锁本身就完成了频率控制不必再额外写节流。当列表长到几百个 DOM 节点开始拖慢渲染下一步就是虚拟滚动只渲染视口内的条目可以用IntersectionObserver监听条目进出可视区来增删节点。项目已预留 src/components/WaterfallList.vue它把列表按奇偶下标拆成两列可直接嵌进 ScrollList 做瀑布流无限加载另有两个值得做的方向给 Scroll 加方向开关支持横向滚动getData失败分支目前只弹查询失败提示加个重试按钮容错会更完整。调参与避坑清单 项建议预加载阈值默认 60px 是折中值弱网可上调到 100~200强网降到 30pageSize默认 10 条偏大增加首屏渲染成本偏小请求更频繁按条目高度权衡fixedHeight需要把滚动位置同步给外部 UI 时传具体数值px否则保持默认 -1useRefresh为 true 才进入绑定触摸事件的模板分支用不到就别开刷新语义refresh会把pageNo归零并整表替换和追加加载是两条路径别混用把Scroll 管手势、ScrollList 管数据拆开后无限加载就从一次性实现变成了可复用能力换一个api任何列表场景都能接上。想深入细节可以git clone https://gitcode.com/GitHub_Trending/do/douyin拉取完整源码对照首页视频流与 src/pages/shop/ 商城推荐两个场景一起读。【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考