vue2插件vue-seamless-scroll，实现循环滚动列表

官网地址：vue-seamless-scroll

演示地址： vue-seamless-scroll演示地址

实例：

<template>
...
<div class="table-container" style="width: 78%;transform: translateY(4%);">
  <table class="fixed-header-table">
    <thead>
    <tr>
      <th>线路</th>
      <th>计划量</th>
      <th>实际发运量</th>
    </tr>
    </thead>
  </table>
   <!--每一行都有点击事件，实现方式： 使用 @click="scrollClick($event)"的方式在外层父元素上添加点击事件来获取点击的子dom的方式-->
  <div class="table-body-container" @click="showDetailModal($event)" @mouseover="changeCursor">
    <!-- @mousewheel.native.prevent监听了滚轮事件，并使用.prevent修饰符来阻止事件的默认行为 （防止因为鼠标滚轮，出现大面积空白现象） -->
    <vue-seamless-scroll :data="dataList" class="line-table" :class-option="optionSetting" @ScrollEnd="ScrollEnd" @mousewheel.native.prevent="">
      <!--行样式设定 -->
      <!--情况1： 数据个数为偶数时： 按奇偶行显示样式 -->
      <!--情况2： 数据个数为奇数时： 根据回调函数ScrollEnd，设定oddFlag值，动态改变奇偶行显示样式 (PS: 有问题， ScrollEnd回调比页面渲染慢....不知道咋搞了)-->
      <div v-for="(item, index) in dataList" :key="index.toString()"
           :class="dataList % 2 == 0 ? ((index + 1) % 2 == 0 ? 'even-tr' : 'odd-tr') : (oddFlag ? ((index + 1) % 2 == 0 ? 'even-tr' : 'odd-tr') :
           ((index + 1) % 2 == 0 ? 'odd-tr' : 'even-tr'))">
          <spanclass="cell">{{ item.line}}</span>
          <spanclass="cell">{{ item.planWeight }}</span>
          <spanclass="cell">{{ item.actualWeight}}</span>
      </div>
    </vue-seamless-scroll>
  </div>
</div>
...
</template>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    vueSeamlessScroll,
  },
  //如果组件提供了ref属性，你也可以通过$refs来获取组件实例，然后添加事件监听器来禁用滚轮控制。
  //mounted() {
    //this.$refs.scrollContainer.$el.addEventListener('mousewheel', this.preventScroll, {
      //passive: false,
    //});
  //},
  data() {
    return {
      dataList: [
        {line: "线路1", planWeight: 10, actualWeight: 11},
        {line: "线路2", planWeight: 20, actualWeight: 22},
        {line: "线路3", planWeight: 30, actualWeight: 33},
        {line: "线路4", planWeight: 40, actualWeight: 44},
        {line: "线路5", planWeight: 50, actualWeight: 55},
        {line: "线路6", planWeight: 60, actualWeight: 66},
        {line: "线路7", planWeight: 70, actualWeight: 77},
        {line: "线路8", planWeight: 80, actualWeight: 88},
        {line: "线路9", planWeight: 90, actualWeight: 99}
      ],
      oddFlag: false,
    }
  },
  computed:{
    //控制滚动属性
    optionSetting(){
      return{
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        autoPlay: true, // 是否自动滚动
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  methods: {
    //preventScroll(event) {
      //event.preventDefault();
    //},
    ScrollEnd: function(){
      this.oddFlag = !this.oddFlag
    },
    showDetailModal($event){
      const parentElement = $event.target.parentNode; // 获取当前子节点的父节点
      const lineName = parentElement.children[0].innerText //获取当前点击行的线路名称
      .......
    },
  },
};

vue2插件vue-seamless-scroll，实现循环