vue2实现列表自动滚动

vue-seamless-scroll插件在Vue2中使用

1、安装插件vue-seamless-scroll

npm方式：npm install vue-seamless-scroll --save  
yarn方式：yarn add vue-seamless-scroll

2、引入插件

import vueSeamlessScroll from 'vue-seamless-scroll'

components: {
    vueSeamlessScroll
}

3、使用

<div class="swiper alarm_list">
  <vue-seamless-scroll
    :data="swiperData"
    :class-option="optionHover"
    class="swiper-wrapper"
  >
    <ul class="item">
      <li
        class="swiper-item"
        v-for="(item, idx) in swiperData"
        :key="'item' + idx"
      >
        <p>{{ item.alarmName }}</p>
        <p>{{ item.deviceName }}</p>
        <p>{{ item.powerstationName }}</p>
        <p>{{ item.alarmTime }}</p>
        <p :style="{ color: getLevelEnum(item.alarmLevel).color }">
          {{ getLevelEnum(item.alarmLevel).value }}
        </p>
      </li>
    </ul>
  </vue-seamless-scroll>
</div>

data () {
   return {
   classOption: {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000
      },
    }
}