如何给列表加上抖音式无限加载开源项目 douyin-vue 完整拆解【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyindouyin-vue 是一个用 Vue3 Vite5 Pinia 搭出来的移动端短视频应用数据走本地 mock 模拟真实后端。这次不聊视频播放只拆其中一套最有复用价值的技巧抖音式无限滚动列表。项目把取数据和处理滑动拆成ScrollList与Scroll两层组件列表跟着手指走、自动翻页全程没有一个加载更多按钮。没有无限加载列表体验是什么样很多网页列表第一屏加载完底部就躺着一个加载更多按钮。点一下等几秒多出十条再想多看还得滚回底部再点一次。网络慢的时候用户盯着白块干等数据到了列表又猛地跳一下。抖音式无限滚动列表要解决的是两件事手指不用离开屏幕数据刚刚好到位——不早到浪费带宽不晚到露出空白。 这个项目的整体方案项目把无限滚动列表收进 src/components/ 下的两个文件各管一摊ScrollList.vue管数据页码走到哪了、总共多少条、是不是有请求在飞Scroll.vue管交互监听滚动、决定何时触发翻页顺带做出下拉刷新。页面自己只声明一件事——数据从哪来ScrollList :apirecommendedShop template #default{ list } !-- 列表项渲染 -- /template /ScrollList这段只把请求函数交给组件翻页时机、拼接、加载状态全部由两个组件内部处理页面代码因此非常薄。数据层分页请求怎么防重复最容易被忽略的细节是快速滑动时 scroll 事件短时间能触发几十次不加防护一页数据能刷出一堆重复请求。ScrollList用一个reactive状态兜住全局const state reactive({ list: [], // 已渲染的数据 total: 0, // 服务端返回的总条数 pageNo: 0, // 下一次要取的页码 pageSize: 10, // 每页 10 条 loading: false // 请求飞行中标记 })这五个字段描述了列表此刻的全部处境后续逻辑都围绕它们转。真正干活的在getData里关键就是开头那个加载锁if (state.loading) return state.loading true let res await props.api({ pageNo: state.pageNo, pageSize: state.pageSize }) state.loading false if (res.success) { state.list state.list.concat(res.data.list) state.total res.data.total }第一行就是锁请求在飞时任何新触发直接丢弃像卫生间门上的使用中牌子后面的人只能等这一轮结束。返回数据用concat接到旧数组尾部已有节点原样保留Vue 的 diff 只会处理新增部分滚动位置不会被新数据顶走。另外服务端会带total回来getData开头就判断取够了没有取够了连请求都不发。交互层预加载与下拉刷新下一页什么时候取60px 提前量Scroll在 scroll 事件里做了一道减法if (this.wrapper.scrollHeight - this.wrapper.clientHeight this.wrapper.scrollTop 60) { this.$emit(pulldown) }内容总高减视口高就是还能往下滚多远。这个值一旦小于 60说明马上到底先发pulldown事件。60px 就是提前量太大会去取用户还没打算看的数据太小用户会先撞见空白。下拉刷新的 300ms 弹性开启useRefresh后Scroll会盯着手指scrollTop为 0 时继续下拖就记下起点、算出位移拉伸上限压到 10px抬手瞬间发出refresh事件同时把过渡时长从 0ms 切到 300msreturn { transition-duration: this.refresh ? 300ms : 0ms, transform: translate3d(0px, ${this.distance}px, 0) }拖动时时长为 0内容 1:1 跟手松手后 300ms 回弹。那种松手被弹回去的手感就是这 300ms 给的。反馈层加载状态给用户看什么一个合格的无限滚动列表不会全程沉默代码里分了三档场景展示什么首次进入、list为空全屏 Loading由:full-loading!state.list.length驱动滚动中取下一页列表尾部一个小型 Loading数据取完NoMore组件文案暂时没有更多了NoMore的出现条件只有一行NoMore v-ifstate.total ! 0 state.total state.list.length /直白说服务端明确告知了总数、且已加载数追平总数才告诉用户没有更多了total为 0 时不显示避免空列表挂着没有更多的尴尬。组件对外暴露的入参与事件汇总如下名称类型说明apiFunction请求函数收pageNo/pageSize需返回{ success, data }loadingBoolean控制尾部加载指示fullLoadingBoolean控制全屏加载指示事件触发时机pulldown距列表底部不足 60pxrefresh顶部下拉达到阈值后松手fixed设置了fixedHeight且scrollTop超过它常用于吸顶跑起来以及接下来能用在哪项目里这套组件已经落地在多个页面商城推荐流 Shop.vue 里每个 item 是一张商品卡社区推荐流 Community.vue 里每个 item 是一条帖子。同一个ScrollList换的只是插槽内容。本地跑通只需四步git clone https://gitcode.com/GitHub_Trending/do/douyin cd douyin npm install npm run dev浏览器切手机模式F12 后按 CtrlShiftM访问 127.0.0.1:3000就能在商城页里亲手体验滚动到底部的自动翻页。项目完整代码地址就是上面这条 clone 命令里的仓库。想再往前推一步有三个现成方向用IntersectionObserver只渲染视口内的条目仓库里的 WaterfallList.vue 展示了按奇偶分两列的拆分思路给getData补一个 catch 分支做失败重试把Scroll的触摸监听从纵向扩到横向复用到轮播场景。【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何给列表加上抖音式无限加载开源项目 douyin-vue 完整拆解【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyindouyin-vue 是一个用 Vue3 Vite5 Pinia 搭出来的移动端短视频应用数据走本地 mock 模拟真实后端。这次不聊视频播放只拆其中一套最有复用价值的技巧抖音式无限滚动列表。项目把取数据和处理滑动拆成ScrollList与Scroll两层组件列表跟着手指走、自动翻页全程没有一个加载更多按钮。没有无限加载列表体验是什么样很多网页列表第一屏加载完底部就躺着一个加载更多按钮。点一下等几秒多出十条再想多看还得滚回底部再点一次。网络慢的时候用户盯着白块干等数据到了列表又猛地跳一下。抖音式无限滚动列表要解决的是两件事手指不用离开屏幕数据刚刚好到位——不早到浪费带宽不晚到露出空白。 这个项目的整体方案项目把无限滚动列表收进 src/components/ 下的两个文件各管一摊ScrollList.vue管数据页码走到哪了、总共多少条、是不是有请求在飞Scroll.vue管交互监听滚动、决定何时触发翻页顺带做出下拉刷新。页面自己只声明一件事——数据从哪来ScrollList :apirecommendedShop template #default{ list } !-- 列表项渲染 -- /template /ScrollList这段只把请求函数交给组件翻页时机、拼接、加载状态全部由两个组件内部处理页面代码因此非常薄。数据层分页请求怎么防重复最容易被忽略的细节是快速滑动时 scroll 事件短时间能触发几十次不加防护一页数据能刷出一堆重复请求。ScrollList用一个reactive状态兜住全局const state reactive({ list: [], // 已渲染的数据 total: 0, // 服务端返回的总条数 pageNo: 0, // 下一次要取的页码 pageSize: 10, // 每页 10 条 loading: false // 请求飞行中标记 })这五个字段描述了列表此刻的全部处境后续逻辑都围绕它们转。真正干活的在getData里关键就是开头那个加载锁if (state.loading) return state.loading true let res await props.api({ pageNo: state.pageNo, pageSize: state.pageSize }) state.loading false if (res.success) { state.list state.list.concat(res.data.list) state.total res.data.total }第一行就是锁请求在飞时任何新触发直接丢弃像卫生间门上的使用中牌子后面的人只能等这一轮结束。返回数据用concat接到旧数组尾部已有节点原样保留Vue 的 diff 只会处理新增部分滚动位置不会被新数据顶走。另外服务端会带total回来getData开头就判断取够了没有取够了连请求都不发。交互层预加载与下拉刷新下一页什么时候取60px 提前量Scroll在 scroll 事件里做了一道减法if (this.wrapper.scrollHeight - this.wrapper.clientHeight this.wrapper.scrollTop 60) { this.$emit(pulldown) }内容总高减视口高就是还能往下滚多远。这个值一旦小于 60说明马上到底先发pulldown事件。60px 就是提前量太大会去取用户还没打算看的数据太小用户会先撞见空白。下拉刷新的 300ms 弹性开启useRefresh后Scroll会盯着手指scrollTop为 0 时继续下拖就记下起点、算出位移拉伸上限压到 10px抬手瞬间发出refresh事件同时把过渡时长从 0ms 切到 300msreturn { transition-duration: this.refresh ? 300ms : 0ms, transform: translate3d(0px, ${this.distance}px, 0) }拖动时时长为 0内容 1:1 跟手松手后 300ms 回弹。那种松手被弹回去的手感就是这 300ms 给的。反馈层加载状态给用户看什么一个合格的无限滚动列表不会全程沉默代码里分了三档场景展示什么首次进入、list为空全屏 Loading由:full-loading!state.list.length驱动滚动中取下一页列表尾部一个小型 Loading数据取完NoMore组件文案暂时没有更多了NoMore的出现条件只有一行NoMore v-ifstate.total ! 0 state.total state.list.length /直白说服务端明确告知了总数、且已加载数追平总数才告诉用户没有更多了total为 0 时不显示避免空列表挂着没有更多的尴尬。组件对外暴露的入参与事件汇总如下名称类型说明apiFunction请求函数收pageNo/pageSize需返回{ success, data }loadingBoolean控制尾部加载指示fullLoadingBoolean控制全屏加载指示事件触发时机pulldown距列表底部不足 60pxrefresh顶部下拉达到阈值后松手fixed设置了fixedHeight且scrollTop超过它常用于吸顶跑起来以及接下来能用在哪项目里这套组件已经落地在多个页面商城推荐流 Shop.vue 里每个 item 是一张商品卡社区推荐流 Community.vue 里每个 item 是一条帖子。同一个ScrollList换的只是插槽内容。本地跑通只需四步git clone https://gitcode.com/GitHub_Trending/do/douyin cd douyin npm install npm run dev浏览器切手机模式F12 后按 CtrlShiftM访问 127.0.0.1:3000就能在商城页里亲手体验滚动到底部的自动翻页。项目完整代码地址就是上面这条 clone 命令里的仓库。想再往前推一步有三个现成方向用IntersectionObserver只渲染视口内的条目仓库里的 WaterfallList.vue 展示了按奇偶分两列的拆分思路给getData补一个 catch 分支做失败重试把Scroll的触摸监听从纵向扩到横向复用到轮播场景。【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
