最近工作中需要做个大屏,大屏中有一个模块需要完成一个滚动列表,随后我就在网上找到了一个无缝滚动列表的插件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的高度