Ant Design Vue3 封装Table自动滚动实现方案

xuezhebianhuai

已于 2024-03-08 16:39:46 修改

阅读量516

点赞数 7

文章标签： vue.js javascript 前端

于 2024-03-08 15:52:25 首次发布

本文链接：https://blog.csdn.net/xuezhebianhuai/article/details/136564290

版权

本文介绍了如何在Vue应用中使用表格组件（如AntDesign的Table），实现基于滚动事件的自动滚动功能，包括计算滚动步长、平滑滚动效果以及组件卸载时的定时器管理。

摘要由CSDN通过智能技术生成

<div class="common-scroll-table" >
    <a-table v-bind="newAttrs" ref="tableRect"/>
  </div>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, useAttrs, computed, nextTick, watch } from 'vue'
const tableRect = ref()
const attrs = useAttrs()
let scrollDirection = 'down' // 滚动方向 up向上 down向下

const defaultProps = {
  pagination: false,
  size: 'small',
  locale:{
    emptyText:'暂无数据'
  }
}

const newAttrs = computed(() => {
  return Object.assign(defaultProps, attrs)
})
let scrollAnimationFrame ;
function scrollFun() {
  console.log('进来了')
   // 假设你有一个方法来自动滚动表格
   const autoScrollTable = () => {
      const tableWrapper = document.querySelector('.ant-table-body');
      const tableThead = document.querySelector('.ant-table-thead');
      console.log(tableWrapper)
      if (tableWrapper) {
        const currentScroll = tableWrapper.scrollTop;
        const targetScroll = tableWrapper.scrollHeight;
        const tableTheadScrol = tableWrapper.clientHeight;
        // const contentHeight = tableWrapper.scrollHeight;
        const visibleHeight = tableWrapper.clientHeight;
         // 计算每次滚动的距离
         const scrollStep = 10; // 可以根据需要调整这个值

        if (currentScroll < targetScroll) {
          // 使用 requestAnimationFrame 创建平滑滚动效果
          const scrollAnimationFrame = window.requestAnimationFrame(() => {
            tableWrapper.scrollTop = currentScroll + scrollStep;
            console.log(tableWrapper.scrollTop, targetScroll, tableTheadScrol)
            if(targetScroll - tableTheadScrol == tableWrapper.scrollTop) {
              console.log('到底了')
             // 到达底部，取消递归调用
             window.cancelAnimationFrame(scrollAnimationFrame);
            } else {
              autoScrollTable()
            }

          });
        } else {
          console.log('到底了')
          // 到达底部，取消递归调用
          window.cancelAnimationFrame(scrollAnimationFrame);
        }
      }
    };
    autoScrollTable()
    // 使用 setInterval 来自动滚动表格
    // const intervalId = setInterval(autoScrollTable, 3000); // 每3秒滚动一次

    // 在组件卸载时清除定时器
    // return () => clearInterval(intervalId);
}

function pauseScroll() {
  // 定时器不为空
  if (scrollTimer) {
    // 清除定时器
    clearInterval(scrollTimer)
    scrollTimer = null
  }
}

let intervalId = null;

onMounted(async () => {

});
watch(
  newAttrs,
  () => {
    console.log(newAttrs)
    scrollFun()
  },
  { deep: true }
)
onBeforeUnmount(() => {
      // 组件卸载前取消动画帧
      if (scrollAnimationFrame) {
        window.cancelAnimationFrame(scrollAnimationFrame);
      }
    });

// onBeforeUnmount(() => {})