需求描述

系统中展示进行中任务列表，默认展示5条记录，超出5条记录后列表自动滚动展示。

插件安装及使用

vue-seamless-scroll 基于vue.js的无缝滚动

• 安装：

npm install vue-seamless-scroll --save
yarn add vue-seamless-scroll

• 系统引用

全局注册main.js

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

单个注册.vue

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

• 代码实现

<div class="title-text">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <th>任务名称</th>
        <th>执行人</th>
        <th>当前进度</th>
      </tr>
    </table>
</div>
<div v-if="list.length" @click="showInfo" class="content">
    <vue-seamless-scroll :key="timeKey" :data="list" :class-option="scrollOption" class="info">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr v-for="(item, index) in list" :key="index" :data-index="index">
          <td>{{item.title}}</td>
          <td>{{item.name}}</td>
          <td>{{item.progress}}</td>
        </tr>
      </table>
    </vue-seamless-scroll>
</div>
<div v-else class="empty">暂无数据</div>

• 部分配置

computed: {
  scrollOption () {
    return {
      step: 0.5, // 数值越大速度滚动越快
      limitMoveNum: 6, // 开始无缝滚动的数据量 this.list.length+1
      hoverStop: true, // 是否开启鼠标悬停stop
      direction: 1, // 0向下 1向上 2向左 3向右
      openWatch: true, // 开启数据实时监控刷新dom
      singleHeight: 21, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      waitTime: 2500 // 单步运动停止的时间(默认值1000ms)
    }
  }
},

注意事项

1. vue-seamless-scroll
   滚动数据data必须设置，否则将不会滚动。样式需要设置高度与overflow: hidden;
2. 单步运动停止的高度
   单步运动停止的高度应该为单行数据高度的整数倍，在文章示例中就是<tr>高度的整数倍。当设置为整数倍时，列表文字都可以清楚展示看做为无缝滚动，否则就会出现文字展示不全的问题。
3. 单行数据添加点击事件无效
   一般情况下我们会把点击事件添加到循环行<tr>上，但是由于此组件的原因，点击事件会出现问题。解决方法，给父元素绑定事件，在子元素上进行事件捕获。

• 父元素绑定事件：父容器添加click事件showInfo，如果需要传入其他参数，showInfo可以改为showInfo($event, param)，param为传入参数
• 在循环行上添加自定义的 data-x 属性
• 在事件showInfo中通过鼠标事件e与自定义属性进行查找

showInfo(e) {
  let idx = e.target.parentNode.dataset.index;
  console.log(this.list[idx]) //点击行数据
  // e：鼠标事件，e.target：点击元素(<td>)，e.target.parentNode：点击元素父元素(<tr>)，e.target.parentNode.dataset：自定义属性位置
}

4. 页面存在定时器，数据实时刷新时，数据量(list.length)减少，由可滚动数据量变为不可滚动，页面显示依然滚动，limitMoveNum未生效。
   在vue-seamless-scroll增加key属性，避免组件复用，每次数据请求时刷新key。key可以定义为当前时间（new Date().getTime()）。

参考链接

vue-seamless-scroll官方文档
vue-seamless-scroll插件在线演示文档
vue-seamless-scroll的使用以及实例