Vue2 实现一个无缝循环滚动的列表

前言

导师让我封装一个 无缝循环滚动的组件，要求是不能用插件，第三方库，最多只能用element ui。

那好，直接手撕一个无缝滚动列表好吧

效果

实现效果如下：另外封装的这个组件，通过 props 1，可以控制滚动速度、 2，控制鼠标移入滚动停止功能、3，控制滚动到底部是跳到下一页数据，还是本页数据无缝循环滚动，4，在父组件可以控制是丝滑切换数据还是 回到顶部再继续滚动

1698298242609

实现

由于比较懒，直接给出全部代码，也方便各位靓仔使用

实现思路：

在vue中如何复制一份列表出来呢且不能丢失绑定的事件，很简单使用slot插槽，使用两个插槽我们就拥有了两个列表

<div class="listScroll" ref="box">
    <slot></slot>
    <slot></slot>
</div>

实现思路参考了另一个大佬，下面是原文链接，感谢
原文链接：https://blog.csdn.net/ZuoZuoDangerou/article/details/123662676

1，封装组件

<template>
  <div class="listScroll" ref="box">
    <slot></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "listScroll",
  created() {},
  props: {
    // 控制动画滚动 速度
    speed: {
      default: 1,
      type: Number,
    },
    // 控制 鼠标移入滚动停止功能
    isMouseControl: {
      default: true,
      type: Bo