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: "2022-05-02" },{ name: "党员活动",value:"38", times: "2022-08-01" },{ name: "潘家小镇美丽游",value:"120", times: "2022-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);
}

Vue 表格循环滚动，鼠标移入暂停，移出继续滚动相关推荐

vue的鼠标移入和移出
vue的鼠标移入和移出需求(鼠标到预约二维码显示,预约添加背景色) 实现  <ul class="person_list"> / ...
基于swiper使用vue-awesome-swiper 实现鼠标移入暂停自动播放、左右按钮控制前进后退、常见避坑、API中文文档地址
vue 中使用swiper/vue-awesome-swiper 鼠标移入暂停自动播放,左右按钮控制前进后退,常见避坑 swiper对应vue-awesome-swiper版本会带来很多坑点,推荐下面 ...
【鼠标移入暂停animation动画】
鼠标移入暂停animation动画实现思路代码详解其他实现思路咱们能够利用鼠标的hover伪类实现动画的暂停css 代码 div:hover {animation-play-state:p ...
JS鼠标移入，移出事件
该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html> <html lang="en"> & ...
vue 列表萌层鼠标移入移出_vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法...
鼠标移入添加class样式 HTML HTML绑定事件,加入或者移出class为active 流量套餐 JS 这里除了active这个class需要动态添加或者减去,其他的皆是移入移出都需要的clas ...
CSS实现当鼠标移入或者移出时实现动画过渡效果
现在需要完成这样一个需求在鼠标移入一个按钮时,需要有一个从下到上慢慢改变背景颜色以及字体颜色的动画效果,再鼠标移出的时候,也要有一个从上到下慢慢变回原来动画的过渡效果因为不会截动态图,因此用每个步 ...
js中jquery鼠标事件（点击替换、鼠标移入、移出）
1.先添加三张图片 <img src="./vscode/images/1.jpg" width="300"><img src=". ...
鼠标移入显示移出隐藏及反复闪烁问题
html代码 <div id="prev"></div><div id= ...
swiper轮播图鼠标移入暂停有延时的问题
鼠标移入三个swiper同时停止,鼠标离开三个swiper同时开始没有解释,直接使用吧 //鼠标移入事件stop(){this.stopSwiper(0);this.stopSwiper(1);th ...

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

Vue 表格循环滚动，鼠标移入暂停，移出继续滚动相关推荐

最新文章

热门文章