vue-seamless-scroll实现列表无缝滚动

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

先上一下最终实现效果：

最开始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)

使用

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

key	description	default	val
step	数值越大速度滚动越快	1	Number
limitMoveNum	开启无缝滚动的数据量	5	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number
switchOffset	左右切换按钮距离左右边界的边距(px)	30	Number
autoPlay	是否自动播放使用switch切换时候需要置为false	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean