使用无缝滚动列表插件vue-seamless-scroll

最近工作中需要做个大屏，大屏中有一个模块需要完成一个滚动列表，随后我就在网上找到了一个无缝滚动列表的插件vue-seamless-scroll可以实现无缝滚动列表插件

插件文档：安装 | vue-seamless-scroll

下面是使用方法：

安装：

npm install vue-seamless-scroll --save

下载完成以后先在组件中引入该插件：

import scroll from "vue-seamless-scroll";

用法：

<scroll class="container" :data="tableData"  :class-option="optionHover">
    <ul class="body">
        <li v-for="(item, index) in tableData" :key="index"
>
           
        </li>
    </ul>
</scroll>

在:data中一定要写你的列表数组，因为为了实现无缝循环滚动它需要在之前拷贝一份数据，去进行循环更替

computed: {
    optionHover() {
      return {
        direction: 1,//滚动方向
        hoverStop: true, //是否悬停
        step: 1,
        singleHeight: 27 // 单行停顿，为0则是不停顿 不为0，则为每一行的li的高度
      };
    }
  },

step的值越大，滚动速度越快，singleHeight 是单行停顿，为0则是不停顿 不为0，则为每一行的li的高度