前端新手的个人笔记————————————————————————————————
代码:
data(){
return{
timer: null,
}
},
methods:{
scrollTable() {
// 在执行新的计时器前将之前的计时器清除
if (this.timer) clearInterval(this.timer);
let status = true;
// 获取表格滚动区域的dom
const scrollDom = this.$refs.table1.bodyWrapper
// 增加监听事件鼠标移入停止滚动
scrollDom.addEventListener('mouseover', () => {
status = false;
});
// 鼠标移出恢复滚动
scrollDom.addEventListener('mouseout', () => {
status = true;
});
// 设置定时器
this.timer = setInterval(() => {
if (status) {
// 设置每次滚动的像素
scrollDom.scrollTop += 1;
// 当滚动到底部时修改scrollTop回到顶部
if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1) {
scrollDom.scrollTop = 0;
}
}
//控制速度
}, 40);
},
},
mounted(){
this.scrollTable(),
},
destroyed() {
window.removeEventListener("resize", () => {
myChart.resize();
});
// 组件卸载记得清除计时器
if (timer) clearInterval(timer);
timer = null;
//移除监听事件
scrollDom.removeEventListener('mouseover');
},