React+Antd实现表格自动向上滚动

1、效果

React+Antd实现表格自动向上滚动_第1张图片

2、环境

1、react18

2、antd 4+

3、代码实现

原理:创建一个定时器,修改表格ant-table-body的scrollTop属性实现滚动,监听表层的元素div的鼠标移入和移出实现实现鼠标进入元素滚动暂停,移出元素的时候表格滚动继续。

一、滚动组件实现如下,

/**
 * 公共组件:表格滚动
 */
import { Table } from 'antd';
import { useEffect, useRef } from 'react';

/**
 * 表格滚动组件
 * @param {Number} props.rollTime 表格每次滚动间隔时间 单位ms
 * @param {Number} props.rollNum 表格超过指定条数开始滚动
 * @param {Number} props.rollTop 表格每次滚动的高度 单位px
 * @param {Boolean} props.flag 是否滚动
 * @returns
 */
const ScrollTable = (props: any) => {
  const {
    dataSource,
    rollTime = 100,
    rollNum = 10,
    rollTop = 2.5,
    flag = true,
  } = props;
  let timer: any = null;
  const tableContainer = useRef();

  // 开启定时器
  const initialScroll = (data: any) => {
    let container: any = tableContainer.current;
    container = container.getElementsByClassName('ant-table-body')[0];
    if (data.length > Number(rollNum) && flag) {
      // 只有当大于10条数据的时候 才会看起来滚动
      let time = setInterval(() => {
        container.scrollTop += Number(rollTop);
        if (
          Math.ceil(container.scrollTop) >=
          Number(container.scrollHeight - container.clientHeight)
        ) {
          container.scrollTop = 0;
        }
      }, Number(rollTime));
      timer = time;
    }
  };

  useEffect(() => {
    initialScroll(dataSource);
    return () => {
      clearInterval(timer);
    };
  }, []); // 检测数组内变量 如果为空 则监控全局

  return (
    
{ clearInterval(timer); }} onMouseOut={() => { initialScroll(dataSource); }} > ); }; export default ScrollTable;

二、调用该组件

/**
 * 示例: 滚动表格示例
 */
import ScrollTable from '@/components/ScrollTable';
import clsx from 'clsx';

const COLUMNS = [
  {
    dataIndex: 'index',
    valueType: 'indexBorder',
    width: 48,
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];
const DATA_SOURCE = new Array(30).fill(0).map((item, index) => ({
  id: index + 1,
  name: `张三-${index}`,
  labels: `labels-${index}`,
  age: index,
  address: `武汉-${index}`,
}));

const ScrollTableExample = () => {
  return (
    
); }; export default ScrollTableExample;

你可能感兴趣的:(React,Antd,react.js,javascript,前端)