近日，业务需要实现公告消息一直无缝滚动，我借助了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 这一选项为 小于等于 当前数据的长度，大于当前数据长度的话这个竖向滚动无法生效。就这一个地方卡了近半个小时，文档也没有特别标注，所以我特别标注一下这一属性的重要性。

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