介绍

在开发过程中，经常会用到表格数据轮询展示，结合antd组件库中的table组件实现表格自动滚动，鼠标滑入时停止滚动，滑出时继续滚动的效果。

组件源码

import React, { useEffect, useState } from 'react'
import styles from './styles.less'
import { Table } from 'antd';
const dataSource = [
    {
        col1: '张三',
        col2: '手机支付',
        col3: '2022.7.28 14:26:00',
        col4: 'aj1',
        col5: '已处理',
        key: '1'
    },
    {
        col1: '李四',
        col2: '手机支付',
        col3: '2022.7.28 14:26:00',
        col4: 'aj1',
        col5: '已处理',
        key: '2'
    },
    {
        col1: '王五',
        col2: '手机支付',
        col3: '2022.7.28 14:26:00',
        col4: 'aj1',
        col5: '已处理',
        key: '3'
    },
    {
        col1: '小刘',
        col2: '手机支付',
        col3: '2022.7.28 14:26:00',
        col4: 'aj1',
        col5: '已处理',
        key: '4'
    },
    {
        col1: '坤坤',
        col2: '手机支付',
        col3: '2022.7.28 14:26:00',
        col4: 'aj1',
        col5: '已处理',
        key: '5'
    },
    {
        col1: '练习生',
        col2: '手机支付',
        col3: '2022.7.28 14:26:00',
        col4: 'aj1',
        col5: '已处理',
        key: '6'
    },
];

const columns = [
    {
        title: '表头1',
        dataIndex: 'col1',
        key: 'col1',
        width: 100,
    },
    {
        title: '表头2',
        dataIndex: 'col2',
        key: 'col2',
        width: 120,
    },
    {
        title: '表头3',
        dataIndex: 'col3',
        key: 'col3',
        width: 200,
    },
    {
        title: '表头4',
        dataIndex: 'col4',
        key: 'col4',
        width: 200,
    },
    {
        title: '表头5',
        dataIndex: 'col5',
        key: 'col5',
        width: 100
    }
];

const Index = () => {
    const [dataList, setDataList] = useState(null)
    const [timer, setTimer] = useState(null);  // 定时器
    useEffect(() => {  // 发送数据请求 设置订阅/启动定时器 手动更改 DOM 等 ~
        getData(dataSource)
    }, [])  // 检测数组内变量 如果为空 则监控全局
    const getData = (data) => {
        if (data) {
            setDataList(data)
            if (document.querySelector('#cyclicScroll')) {
                InitialScroll(data)
            }
        }
    }
    // 开启定时器
    const InitialScroll = (data) => {
        let v = document.getElementsByClassName("ant-table-body")[0];
        // 只有当大于4条数据的时候 也就是每条数据的宽度  才会滚动 
        if (data.length > 4) {
            let time = setInterval(() => {
                v.scrollTop += 2.5;
                if (Math.ceil(v.scrollTop) >= parseFloat(v.scrollHeight - v.clientHeight)) // 滚动区域 - 视口区域
                {
                    v.scrollTop = 0
                }
            }, 100)
            setTimer(time)  // 定时器保存变量 利于停止
        }
    }


    return (
        <div className={styles.container}>
            <div className={styles.overall}>
                <div onMouseLeave={() => {
                    if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消
                    InitialScroll(dataList)
                }} onMouseEnter={() => {
                    if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消
                    clearInterval(timer)
                }} className={styles.table}>
                    <Table id="cyclicScroll"
                        scroll={{ y: 310 }}
                        dataSource={dataList}
                        columns={columns}
                        pagination={false}
                        rowClassName={(record, index) => index % 2 === 0 ? styles.oddNumber : styles.evenNumbers} />
                </div>
            </div>
        </div>
    )
}
export default Index

实现效果