vue页面如何利用插件实现列表滚动循环

vue页面如何利用vue-seamless-scroll插件实现列表滚动循环，下面web建站小编给大家详细介绍一下实现代码！

1、安装脚手架

cnpm install vue-seamless-scroll --save

2、页面调用

<template>
  <vue-seamless-scroll :data="CardPartsStatisticsList" class="seamless-warp" :class-option="classOption">
    <ul>
      <li class="DataList_top" v-for="(item,index) in CardPartsStatisticsList" :key="index" v-if="index < 5">
        <div class="DataList_left">{{index+1}}</div>
        <div class="DataList_left">{{item.itemname}}</div>
        <div class="DataList_left">{{item.number}}</div>
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
 data() {},
 components: {
   vueSeamlessScroll
 },
 computed: {
   classOption () {
     return {
       step: 0.2, // 数值越大速度滚动越快
       limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
       hoverStop: true, // 是否开启鼠标悬停stop
       direction: 1, // 0向下 1向上 2向左 3向右
       openWatch: true, // 开启数据实时监控刷新dom
       singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
       singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
       waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
     }
   }
 },
}
 
</script>

<style>
.seamless-warp{
 width: 100%;
 height: calc(100% - 16px);
 overflow: hidden;
}
</style>