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组件有关系。