vue 插件 | 自動滾動 vueSeamlessScroll

1.下載安裝

npm install vue-seamless-scroll --save

2.引入

import vueSeamlessScroll from "vue-seamless-scroll";

3.註冊使用組件

<vueSeamlessScroll :class-option='defaultOption' :data="activeData" style="height: 194px;">
    <ul>
        <li v-for="(item, index) in activeData" :key="index">
            <template>
              <span class="projectName">{{ item.projectName }}</span>
              <span class="projctStatusDesc">{{ item.projctStatusDesc }}</span>
            </template>
        </li>
    </ul>
</vueSeamlessScroll>

components: {
    vueSeamlessScroll
}

computed: {
    defaultOption () {
      return {
        step: 1, // 數值越大速度滾動越快
        limitMoveNum: 4,
        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)
      }
   }
},

以上用法沒有問題

 

在使用過程中，通過檢查元素髮現，循環滾動時有兩組相同數據通過顯隱來進行滾動。

遇到的問題，在第二組數據出現時樣式未同步渲染，等數據滾動出來後樣式才渲染成功。

解決辦法：將原本的<table>改爲<ul>和<li> // 都使用<div>應該也是可以的，未做測試。

解決過程：元素檢查時發現第二組數據渲染時結構改變了，原本的標籤從父子關係變成了兄弟關係，可能和table組件有關係。