ElementUI table无缝循环滚动
恰好实习的时候遇到了这个需求,而且网上的代码有点僵硬,所以我改了改,顺手水一篇博客出来,其实是很简单的东西。
部分思路来源:https://blog.csdn.net/qq_38543537/article/details/122842943
但是来源的代码,在滚动到底部时会有非常生硬的切换,我这里改了一些代码,让它的滚动变得流畅。
效果:
原理:
代码:
HTML:
JS:
data() {
return {
timer: null,
//注意:它需要将展示的数据额外复制一份(为了无缝滚动)
tableData: [
{ num:1},
{ num:2},
{ num:3},
{ num:4},
{ num:5},
{ num:6},
{ num:7},
{ num:8},
{ num:9},
{ num:10},
{ num:1},
{ num:2},
{ num:3},
{ num:4},
{ num:5},
{ num:6},
{ num:7},
{ num:8},
{ num:9},
{ num:10},
]
};
},
methods: {
//自动循环播放
autoCycle() {
//拿到相关元素
const wrapper = this.$refs.table.bodyWrapper
//window.requestAnimationFrame()或许是更好的选择,但是有点快,
//如果要慢的话,可能需要写额外的判断或函数(difftime)
//优点是 减少回流和重塑。 缺点是 在主线程,如果卡的话会影响动画。
this.timer = setInterval(() => {
// 元素自增距离顶部1像素
wrapper.scrollTop += 1
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (wrapper.clientHeight + wrapper.scrollTop == wrapper.scrollHeight) {
// 重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小) - 整个高度/2
wrapper.scrollTop = wrapper.scrollTop - wrapper.scrollHeight/2
}
}, 50)
}
}
Original: https://www.cnblogs.com/m1pha/p/16561644.html
Author: m1pha
Title: ElementUI table无缝循环滚动
原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/582618/
转载文章受原作者版权保护。转载请注明原作者出处!