表格循环滚动

src/views/portraitScreen/components/qyzpq.vue

@@ -24,45 +24,55 @@
 
 import { onMounted, ref, Ref } from "vue";
 const tableRef = ref(null); //表格实例
-// const tableData = ref<any[]>([]) //定义表格list
+let scrollInterval = null;
-//表格测试数据
+let isScroll = true;
-const getTableData = () => {
+let scrollSpeed = 2;
-  let data = [];
+let scrollDelay = 20; // 控制滚动速度
-  for (var i = 0; i <= 50; i++) {
-    data.push({
-      date: i,
-      name: `Tom${i}`,
-      address: `地区${i}`
-    });
-  }
-  return data;
-};
 
 onMounted(() => {
-  // tableData.value = getTableData() //表格数据赋值
+  setTimeout(() => {
-  scroll(tableRef.value.$refs.bodyWrapper); //设置滚动
+    setupScroll();
+  }, 100);
 });
 
-const scroll = (tableBody) => {
+const setupScroll = () => {
-  let isScroll = true; //滚动
+  if (!tableRef.value) return;
-  const tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
 
-  //鼠标放上去，停止滚动；移开，继续滚动
+  const tableBodyWrapper = tableRef.value.$refs.bodyWrapper;
-  tableDom.addEventListener("mouseover", () => {
+  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) {
+  if (scrollInterval) {
-      tableDom.scrollTop += 10; //设置滚动速度
+    clearInterval(scrollInterval);
-      if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) {
+  }
-        tableDom.scrollTop = 0;
+
+  // 设置新的滚动定时器
+  scrollInterval = setInterval(() => {
+    if (isScroll && scrollContainer) {
+      // 正常滚动
+      scrollContainer.scrollTop += scrollSpeed;
+
+      // 检查是否已经滚动到底部附近
+      if (
+        scrollContainer.scrollTop + scrollContainer.clientHeight >=
+        scrollContainer.scrollHeight - 5
+      ) {
+        // 重置到顶部，实现循环滚动
+        scrollContainer.scrollTop = 0;
       }
     }
-  }, 100);
+  }, scrollDelay);
 };
 
 const tableData = ref([