Vue框架模仿抖音实现手机视频无限滑动特效代码

短视频造就了无数的网红达人，网红有了粉丝关注后每天都会创作新视频，快节奏的时代正好可以满足粉丝们的欣赏欲…

抖音短视频平台独特的看短视频技术深受手机党喜爱！首页的视频怎么刷也刷不完，经常不知不觉的一刷就到半夜了….

本期推荐一款通过JS+HTML+DIV框架实现的模仿抖音实现手机视频无限滑动特效代码：

效果如下：

douyin-vue 是一个模仿抖音|TikTok 的移动端短视频项目。Vue 在移动端的”**实践”，媲美原生 App 丝滑流畅的使用体验。

实现功能特色说明：

最新的 Vue 技术栈，基于 Vue3、Vite5 、Pinia实现

数据保存在项目本地，通过 axios-mock-adapter 库拦截Api 并返回本地json数据

模拟真实后端请求

媲美原生 App 丝滑流畅的使用体验

实现原理：

无限滑动的原理和虚拟滚动的原理差不多，要保持 SlideList 里面永远只有 N 个 SlideItem，就要在滑动时不断的删除和增加 SlideItem。 滑动时调整 SlideList 的偏移量 translateY 的值即可！

无论网站还是APP采用这样作品滑动效果能大大提升用户的停留和访问…

不得不感慨：抖音，费我时间，毁我青春~