60px 预加载：Vue无限滚动在仿抖音项目中的实现拆解

60px 预加载Vue无限滚动在仿抖音项目中的实现拆解【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin给长列表做分页时“加载下一页”按钮常带来两个问题页面跳动、滚动位置丢失。开源项目 douyinVue3 Pinia 仿抖音用一套 Vue无限滚动列表组件把这些问题解决掉了信息流滚动接近底部就自动拉取下一页全程不需要用户手动翻页。这套滚动列表解决什么问题douyin 是一个完整的移动端短视频应用覆盖首页视频流、社区瀑布流、商城商品列表等模块。凡是“往下刷还有更多”的页面底层都复用同一个 ScrollList 组件把数据请求函数交给它分页号维护、预加载触发、加载提示、“没有更多了”的展示全部在组件内部完成页面只写渲染逻辑不维护任何分页状态。先跑通把它接进你自己的页面先把仓库拉下来跑一遍git clone https://gitcode.com/GitHub_Trending/do/douyin接进页面只需要一个组件标签api属性传请求函数插槽拿到已合并好的完整列表ScrollList :apirecommendedShop template #default{ list } div v-foritem in list :keyitem.id img :srcitem.cover / span{{ item.name }}/span /div /template /ScrollList对api的约定入参是{ pageNo, pageSize }pageSize 默认 10返回{ success, data: { list, total } }。另外两个状态不用管列表为空时自动显示全屏加载动画fullLoadinglist.length追上total时自动出现“暂时没有更多了”的提示。页面侧不需要再写任何分页代码。60px 预加载是怎么触发的结论滚动预加载的判定只在底层 Scroll 容器 里做一次距离底部不足 60px 就发出pulldown事件if (this.$attrs.onPulldown) { if (this.wrapper.scrollHeight - this.wrapper.clientHeight this.wrapper.scrollTop 60) { this.$emit(pulldown) } }效果网络请求比用户滚到底提前了 60px 的距离多数情况下数据已经返回列表底部不会出现空白段。阈值 60px 就是“提前量”嫌激进可以调小怕来不及就调大。加载锁如何挡住重复请求结论state.loading就是一个布尔锁请求未结束前任何第二次触发都直接 returnfunction loadData() { if (state.loading) return state.pageNo getData() }效果用户快速连刷时同一时刻只有一个请求在途不会出现页码跳变或数据乱序。拿到新数据后用state.list.concat(res.data.list)增量拼接而不是整体替换数组已有列表项不会重新渲染。下拉刷新组件与滚动记忆Scroll 容器还监听 touchmove当 scrollTop 为 0 且手指继续下移时按distance - 40计算位移并以 10px 封顶松手后触发refresh事件页面监听它执行getData(true)重置页码重新拉取。滚动位置则靠 useScroll 在 keep-alive 的激活/停用时存取scrollTop切走再切回不丢位置。哪些页面在复用这套无限滚动实现LongVideo.vue首页推荐长视频流api传recommendedLongVideoCommunity.vue社区壁纸瀑布流ScrollList 内嵌 WaterfallList 渲染卡片下图就是信息流里的真实内容数据Shop.vue 与 GoodsDetail.vue商城商品列表和详情页“相关推荐”用的是同一个组件、同一个recommendedShop接口。还能往哪优化虚拟滚动目前列表项全部留在 DOM 里条目上千后可改为只渲染可视区域、回收屏外节点内存和重绘都能降一个量级。错误重试请求失败当前只弹“查询失败”提示可在底部提示位加“点击重试”并把失败的pageNo回退 1 再发请求。一套可复用的 Vue无限滚动实现60px 预加载、加载锁、增量拼接。git clone https://gitcode.com/GitHub_Trending/do/douyin【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考