表格页
import AutoScroll from "./auto-scroll";
<AutoScroll
dataSource={data}
columns={columns}
pagination={false}
scroll={{ y: "calc(1280px - 130px - 150px - 500px)" }}
/>
表格滚动组件页
/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState, useRef } from "react";
import { Table } from "antd";
import { MonitoringData } from "../../models/big-screen";
export default function index(props: any) {
// /**表格数据 */
// dataSource: MonitoringData[];
// /** 表格每次滚动间隔时间,单位ms */
// rollTime: number;
// /** 数据超过指定条数开始滚动 */
// rollNum: number;
// /** 表格每次滚动高度, 单位px */
// rollTop: number;
// /** 是否滚动 */
// flag: boolean;
const {
dataSource,
rollTime = 10,
rollNum = 5,
rollTop = 1.5,
flag = true,
} = props;
const [timer, setTimer] = useState<number>(100); // 定时器
// 鼠标初始化,即开始滚动
useEffect(() => {
InitialScroll(dataSource);
// 检测数组内变量 如果为空 则监控全局
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dataSource]);
/**
鼠标初始化,不滚动,鼠标移入移出后,才能触发滚动
useEffect(() => {
InitialScroll(dataSource);
// 检测数组内变量 如果为空 则监控全局
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
*/
// 开启定时器
const InitialScroll = (data: MonitoringData[]) => {
const v = document.getElementsByClassName("ant-table-body")[0];
if (data.length > Number(rollNum) && flag) {
// 只有当大于10条数据的时候 才会看起滚动
const time = setInterval(() => {
v.scrollTop += Number(rollTop);
if (
Math.ceil(v.scrollTop) >= parseFloat((v.scrollHeight - v.clientHeight).toString())
) {
v.scrollTop = 0;
// setTimeout(() => { v.scrollTop = 0 }, 1000)
}
}, Number(rollTime));
setTimer(time); // 定时器保存变量 利于停止
}
};
return (
<div
onMouseOver={() => {
clearInterval(timer);
}}
onMouseOut={() => {
InitialScroll(dataSource);
}}
>
<Table
pagination={false}
scroll={{
y: 500,
x: "100%",
scrollToFirstRowOnChange: true,
}}
{...props}
/>
</div>
);
}