vue-seamless-scroll 不自动滚动解决方法

项目场景：

在子页面使用vue-seamless-scroll

---

问题描述：

没有自动滚动，鼠标移上去，才触发自动滚动

---

原因分析：

数据需要在页面挂载好就赋值，否则页面在加载完成后，数据无法自动滚动

---

解决方案：

在mounted或data中给list赋值，下面介绍一下vue-seamless-scroll 的使用方法

1.安装vue-seamless-scroll

npm install vue-seamless-scroll --save　

2.引入主键

import vueSeamlessScroll from 'vue-seamless-scroll'

components: {
            vueSeamlessScroll
        },

3.html代码

<div style="height: 220px;overflow: hidden">
     <vue-seamless-scroll :data="tableData" :class-option="defaultOption" >
           <ul class="ul-scoll">
                 <li v-for="(item, index) in list" :key='index'>
                     <div style="width: 80px;float:left;">{{item.code}}</div>
                     <div style="width: 80px;float:left;">{{item.name}}</div>
                </li>
           </ul>
    </vue-seamless-scroll>
 </div>

4.滚动动画配置

// 监听属性 类似于data概念
        computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: this.list.length, // 开始无缝滚动的数据量 this.dataList.length
                    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)
                }
            }
        },

5.数据赋值（很重要）

 mounted() {
            // 加载数据表格
            this.loadList();
       },
methods: {
            loadList(){
               let list = [
                    {
                        code:'001',
                        name:'张一',
                    },
                     {
                        code:'002',
                        name:'张二',
                    },
                     {
                        code:'003',
                        name:'张三',
                    },
                     {
                        code:'004',
                        name:'张四',
                    },
                     {
                        code:'005',
                        name:'张五',
                    },
                   
                ]
                for(let a = 0 ;a <10;a++){
                    for(let i = 0 ; i < list.length ; i++){
                        let j = {
                            carNum:list[i].carNum,
                            state: list[i].state,
                            type:list[i].type,
                            time:utilDate.dateFtt(new Date())
                        };
                        this.list.push(j)
                    }
                }
            }
        }

6.运行效果