vue 实现自动循环滚动条| 基于vue-seamless-scroll

官方文档：https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/

1. 安装vue-seamless-scroll

npm install vue-seamless-scroll --save

2. 在main.js中引入组件

import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3. 使用组件

<vue-seamless-scroll
  :data="listData"
  :class-option="classOption"
  class="warp"
  @ScrollEnd="ScrollEnd"
  refs="scroll"
>
  <ul class="item">
    <li v-for="(item, index) in listData" :key="index" :class="index % 2 === 0 ? 'item1' : 'item2'">
      <div class="flex-1" v-text="index+1"></div>
      <div class="flex-1" v-text="item.unit"></div>
      <div class="flex-1" v-text="item.customer"></div>
      <div class="flex-1" v-text="item.user"></div>
      <div class="flex-1" v-text="'1 : ' + item.customerRatio"></div>
      <div class="flex-1" v-text="item.rate?.toFixed(2) + '%'"></div>
    </li>
  </ul>
</vue-seamless-scroll>

import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'Example01Basic',
  components: {
    vueSeamlessScroll
  },
  data() {
    classOption: {
      // 单步运动停止的宽度, 这里设置的是列表的高度
      singleHeight: 36
    },
    // 滚动完的回调函数 滚动完成后停顿3秒后再开始滚动
    ScrollEnd: function () {
      this.$refs.scroll._cancle()
      setTimeout(() => {
        this.$ref.scroll._startMove()
      }, 3000)
    },
  }

注意：最外层容器需要手动设置width、height、overflow:hidden

.warp {
  height: 288px;
  width: 510px;
  overflow: hidden;
}