Merge branch 'master' of http://61.139.16.27:26684/DEV_ZZ/rsxm-master
This commit is contained in:
@ -24,45 +24,55 @@
|
||||
|
||||
import { onMounted, ref, Ref } from "vue";
|
||||
const tableRef = ref(null); //表格实例
|
||||
// const tableData = ref<any[]>([]) //定义表格list
|
||||
//表格测试数据
|
||||
const getTableData = () => {
|
||||
let data = [];
|
||||
for (var i = 0; i <= 50; i++) {
|
||||
data.push({
|
||||
date: i,
|
||||
name: `Tom${i}`,
|
||||
address: `地区${i}`
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
let scrollInterval = null;
|
||||
let isScroll = true;
|
||||
let scrollSpeed = 2;
|
||||
let scrollDelay = 20; // 控制滚动速度
|
||||
|
||||
onMounted(() => {
|
||||
// tableData.value = getTableData() //表格数据赋值
|
||||
scroll(tableRef.value.$refs.bodyWrapper); //设置滚动
|
||||
setTimeout(() => {
|
||||
setupScroll();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
const scroll = (tableBody) => {
|
||||
let isScroll = true; //滚动
|
||||
const tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
|
||||
const setupScroll = () => {
|
||||
if (!tableRef.value) return;
|
||||
|
||||
//鼠标放上去,停止滚动;移开,继续滚动
|
||||
tableDom.addEventListener("mouseover", () => {
|
||||
const tableBodyWrapper = tableRef.value.$refs.bodyWrapper;
|
||||
const scrollContainer = tableBodyWrapper.querySelector(".el-scrollbar__wrap");
|
||||
|
||||
if (!scrollContainer) return;
|
||||
|
||||
// 鼠标悬停控制
|
||||
scrollContainer.addEventListener("mouseover", () => {
|
||||
isScroll = false;
|
||||
});
|
||||
tableDom.addEventListener("mouseout", () => {
|
||||
|
||||
scrollContainer.addEventListener("mouseout", () => {
|
||||
isScroll = true;
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
if (isScroll) {
|
||||
tableDom.scrollTop += 10; //设置滚动速度
|
||||
if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) {
|
||||
tableDom.scrollTop = 0;
|
||||
// 清除之前的定时器(如果有的话)
|
||||
if (scrollInterval) {
|
||||
clearInterval(scrollInterval);
|
||||
}
|
||||
|
||||
// 设置新的滚动定时器
|
||||
scrollInterval = setInterval(() => {
|
||||
if (isScroll && scrollContainer) {
|
||||
// 正常滚动
|
||||
scrollContainer.scrollTop += scrollSpeed;
|
||||
|
||||
// 检查是否已经滚动到底部附近
|
||||
if (
|
||||
scrollContainer.scrollTop + scrollContainer.clientHeight >=
|
||||
scrollContainer.scrollHeight - 5
|
||||
) {
|
||||
// 重置到顶部,实现循环滚动
|
||||
scrollContainer.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
}, scrollDelay);
|
||||
};
|
||||
|
||||
const tableData = ref([
|
||||
|
||||
Reference in New Issue
Block a user