【Vue3+TS+Vite】内部无限循环滚动组件

前言

网上大多都是滚动加载的例如element-ui里的无限滚动，并不是我想要的自身元素无限滚动

组件下载

本人闲暇之余做的，有需要的自行下载使用，直接放到vue3环境里基本可以使用

原理

代码足够简单，理解原理就可以转成其他js框架

1. 一个大div当作组件容器，设置宽高比并设置overflow: hidden;
2. 设置一个子元素div，并通过复制这个子元素再插入到父元素里实现父元素里存在两个子元素效果，设置两个子元素相同的css样式
3. 给两个子元素添加CSS动画

最后：使用vue时完全不需要你写js部分，而且滚动的内容完全通过slot传递，组件宽高都是百分比，滚动速度可以自调，使用时通过外部div设置通用性较强。

有不懂的请自行查询百度哦~_~，百度的AI还是挺好用的~

效果展示哦

上视频！！！
 

代码展示

vue3写法（推荐）：

js写法：