需求描述

系統(tǒng)中展示進行中任務列表，默認展示5條記錄，超出5條記錄后列表自動滾動展示。

插件安裝及使用

vue-seamless-scroll 基于vue.js的無縫滾動

• 安裝：

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

• 系統(tǒng)引用

全局注冊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>執(zhí)行人</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, // 開啟數據實時監(jiān)控刷新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. 單行數據添加點擊事件無效
   一般情況下我們會把點擊事件添加到循環(huán)行<tr>上，但是由于此組件的原因，點擊事件會出現問題。解決方法，給父元素綁定事件，在子元素上進行事件捕獲。

• 父元素綁定事件：父容器添加click事件showInfo，如果需要傳入其他參數，showInfo可以改為showInfo($event, param)，param為傳入參數
• 在循環(huán)行上添加自定義的 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)減少，由可滾動數據量變?yōu)椴豢蓾L動，頁面顯示依然滾動，limitMoveNum未生效。
   在vue-seamless-scroll增加key屬性，避免組件復用，每次數據請求時刷新key。key可以定義為當前時間（new Date().getTime()）。

參考鏈接

vue-seamless-scroll官方文檔
vue-seamless-scroll插件在線演示文檔
vue-seamless-scroll的使用以及實例