vue中实现无缝衔接的轮播效果

今天写项目的时候有一个要求，完成一个类似表格的轮播效果。

1. 安装

npm install vue-seamless-scroll --save      

2. 引入（在需要用到的组件引入即可）

import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {
  	vueSeamlessScroll,
  }

3. 使用（html）

//:data里面传的是动态数组数据
 <vue-seamless-scroll
          :data="tableData"
          :class-option="defaultOption"
          style="overflow: hidden;"
        >
        <a-row
            v-for="(item,index) in tableData"
            :key="index"
            class="scoll-item"
          >
           <a-col :span="10">{{item.account}}</a-col>
            </a-row>
        </vue-seamless-scroll>

4. 配置默认值

computed:{
	defaultOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 
        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)
      }
    },
  }