vue上下滚动的跑马灯 vue-seamless-scroll

1.安装依赖

cnpm install vue-seamless-scroll --save

2.引用插件

<vue-seamless-scroll
  :data="errorList"
  class="seamless-warp"
  :class-option="scrollOption"
>
  <ul class="error-list">
    <li
      v-for="(item, index) in errorList"
      :key="index"
      class="error-item"
    >
      <span>ERROR: {{ item.msg }}</span>
      <span class="btn" @click="onCheck">Check</span>
    </li>
  </ul>
</vue-seamless-scroll>
import vueSeamlessScroll from "vue-seamless-scroll";
data() {
  return {
    errorList: [
      {
        msg: "机器人安全限制报警！",
      },
      {
        msg: "2号氮气柜报警！",
      },
      {
        msg: "3号氮气柜报警！",
      },
      {
        msg: "4号氮气柜报警！",
      },
    ],
    scrollOption: {
      step: 2, // 数值越大速度滚动越快
      limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
      // hoverStop: true, // 是否开启鼠标悬停stop
      // direction: 1, // 0向下 1向上 2向左 3向右
      // openWatch: true, // 开启数据实时监控刷新dom
      singleHeight: 50, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      waitTime: 3000, // 单步运动停止的时间(默认值1000ms)
    },
  };
},

api文档：

https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/06-singleStop.html