vue-seamless-scroll插件无法滚动

近日，业务需要实现公告消息一直无缝滚动，我借助了vue-seamless-scroll插件，效果还不错，今天复盘一下。

---

一、安装

npm install vue-seamless-scroll --save

二、vue页面引用

import vueSeamlessScroll from 'vue-seamless-scroll'

三、注册组件

components

    vueSeamlessScroll

}

基本引入都完成，然后，开始我们的结构（HTML）：

data 为绑定的数据：

数据结构：

listData: [ { timestamp: "04", details:[ { content:"内容", title:"标题", orgnization:"组织" } ] }, { timestamp: "06", details:[ { content:"内容6", title:"标题6", orgnization:"组织6" } ] } ]

      ps：我的数据需要循环嵌套，所以是两层 json。

:class-option 是 vueSeamlessScroll 插件的配置项（写在 computed 里面）：

// 配置vueSeamlessScroll的配置项 computed:{ option() { return { step: 0.6, // 数值越大速度滚动越快 limitMoveNum: this.listData.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) } }, },

  注意：图中的 limitMoveNum 这一选项为 小于等于 当前数据的长度，大于当前数据长度的话这个竖向滚动无法生效。就这一个地方卡了近半个小时，文档也没有特别标注，所以我特别标注一下这一属性的重要性。

如有不当之处，欢迎大家探讨。