Vue 表格循环滚动 鼠标移入暂停 移出继续滚动

简单例子：

<template> 中的代码：

<div id="chart"ref="chart"class="table-body"@mouseenter="tableMouseOver"@mouseleave="tableMouseOut"><div class="row" v-for="(item,index) in tableList" :key="index"><div class="item">{{item.name}}</div><div class="item">{{item.value}}</div><div class="item">{{item.times}}</div></div></div>

data() 中的代码：

data() {return {tableList: [{ name: "潘家小镇电影馆",value:"50", times: "-05-02" },{ name: "党员活动",value:"38", times: "-08-01" },{ name: "潘家小镇美丽游",value:"120", times: "-08-23" },],//定时器名称timers: null,};},

methods: {} 中的代码：

//滚动tableScroll() {let that = this;clearInterval(this.timers);this.timers = setInterval(() => {let ContScroll = that.$refs.chart;//获取当前滚动上去的高度that.currentScrollTop = parseInt(ContScroll.scrollTop);//获取容器可视化高度let currentBoxHeight = parseInt(ContScroll.scrollHeight);if (currentBoxHeight - ContScroll.offsetHeight <=that.currentScrollTop) {// 从头开始滚动// 暂停滚动,让"近30天流出人员去向地及数量"列表开始滚动that.currentindex = 0;ContScroll.scrollTo(0, 0);} else {that.currentindex++;ContScroll.scrollTo({ top: that.currentindex, left: 0 });}}, 100);},// 鼠标移出tableMouseOut() {if (this.isScroll) {this.tableScroll();let ContScroll = this.$refs.chart;//获取当前滚动上去的高度this.currentindex = parseInt(ContScroll.scrollTop);}},// 鼠标移入tableMouseOver() {clearInterval(this.timers);},

beforeDestroy() {} 中的代码：

beforeDestroy() {clearInterval(this.timers);}