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/
转载文章受原作者版权保护。转载请注明原作者出处！