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

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

安装vue-seamless-scroll

npm install vue-seamless-scroll --save

在main.js中引入组件

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

使用组件

<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;}