一个简单的无缝滚动，最近折磨了我好久，记录一下。

先上一下最终实现效果：

最开始html标签用的table、thead、tbody然后结合animate和settimeout实现的，但是实现之后每次滚动都抖一下，也找不到原因；后来寻思是不是table的原因，于是换成div试了一下，原来的问题解决了但是出现了新问题：滚动不流畅，就像网速不好似的。。。于是，我又换成了现在的vue-seamless-scroll组件，完美！上代码：

	<div class='table'>
      <div class='table_head'>
        <ul>
          <li>团队名称</li>
          <li>班次</li>
          <li>姓名</li>
          <li>联系方式</li>
        </ul>
      </div>
      <vue-seamless-scroll
        :data="tableData"
        :class-option="optionSetting"
        class="seamless-warp">
          <ul class="item">
              <li v-for="(item, index) in tableData" :key="index">
              <span v-for="(rowitem, index) in item" :key="index">
                {{rowitem}}
              </span>
            </li>
          </ul>
      </vue-seamless-scroll>
	</div>

import vueSeamless from 'vue-seamless-scroll'
export default {
  name: 'DutyInfo',
  components: {
    vueSeamless
  },
  data () {
    return {
      tableData: []
    }
  },
  async created () {
    let _this = this
    await this.$api.getDuty().then((res) => {
      _this.tableData = res.value.dutyTable.map(v => [v['teamName'], v['schedule'], v['personName'], v['tel']])
    })
  },
  computed: {
    optionSetting () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 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)
      }
    }
  }
}

vue-seamless-scroll的使用方法

安装

npm install vue-seamless-scroll --save

引用

在main.js文件里引用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

使用

见上述代码，常用配置参数如下表：