vue实现数据无缝滚动组件vue-seamless-scroll

如图中的数据实现无缝滚动效果，发现vue的vue-seamless-scroll组件超好用对于数据滚动。

首先，

npm install vue-seamless-scroll --save

其次，引入组件

import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
  　　vueSeamlessScroll
},

然后，在标签中使用

<vue-seamless-scroll :data="listData.station" class="seamless-warp" :class-option="classOption">
        <ul>
          <li v-for="(item,index) in listData.station" :key="index">
            <span class="left-border">{{index+1}}</span>
            <span class="income-title">{{item.station_name}}</span>
          </li>
        </ul>
</vue-seamless-scroll>

css：

.seamless-warp {
      width: 100%;
      height: 80%;
      overflow: hidden;
    }

js配置：

computed:{
    classOption(){
      return {
        step:0.5,//数值越大速度滚动越快，更多参数参考官网参数配置
        // limitMoveNum: 2,// 开始无缝滚动的数据量
      }
    }
  },