当前位置: 首页 > news >正文

使用React+ant Table 实现 表格无限循环滚动播放

数据大屏表格数据,当表格内容超出(出现滚动条)时,无限循环滚动播放,鼠标移入暂停滚动,鼠标移除继续滚动;数据量小没有超出时不需要滚动。
*使用时应注意,滚动区域高度=父元素高度 - 表头高度
1、组件内容

import React, { useState, useEffect, useRef } from "react";
import { Table } from "antd";
import { ColumnsType, TableRef } from "antd/lib/table";
import styles from "./styles.less";
import Nodate from "../Other/nodata";interface InfiniteScrollTableProps<T> {/** 表格数据源 */dataSource: T[];/** 表格列定义 */columns: ColumnsType<T>;/*** 唯一字段*/rowKeyField: string;/*** 滚动速率。* @default 0.5* @description 建议在 0.5-3 之间调整* */speed?: number;
}/*** @description 无限循环滚动table*/
const InfiniteScrollTable = <T = any,>(props: InfiniteScrollTableProps<T>) => {const { dataSource, columns, speed = 0.5, rowKeyField = "key" } = props;const [doubleData, setDoubleData] = useState<any[]>([]);const tableRef = useRef<TableRef>(null);const animationRef = useRef<number | null>(null);const isHovered = useRef(false);// 滚动高度const scrollHeight = useRef(0);// 滚动动画const startScrolling = (begin: boolean) => {if (isHovered.current || !tableRef.current || !tableHasScroll()) return;const table = tableRef.current.nativeElement;const wrapper = table.querySelector(".ant-table-body");if (!wrapper) {return;}// 重置滚动位置if (begin) {wrapper.scrollTop = 0;}const scroll = () => {if (isHovered.current) return;// 滚动到底部时重置位置if (wrapper.scrollTop >= wrapper.scrollHeight / 2) {wrapper.scrollTop = 0;} else {wrapper.scrollTop += speed;}animationRef.current = requestAnimationFrame(scroll);};animationRef.current = requestAnimationFrame(scroll);};// 表格内容是否出现滚动const tableHasScroll = () => {const table = tableRef.current?.nativeElement;const wrapper = table?.querySelector(".ant-table-body");if (!wrapper) {return false;}const hasScroll = wrapper.scrollHeight > wrapper.clientHeight;return hasScroll;};// 停止滚动const stopScrolling = () => {if (animationRef.current) {cancelAnimationFrame(animationRef.current);animationRef.current = null;}};// 处理鼠标事件const handleMouseEnter = () => {isHovered.current = true;stopScrolling();};const handleMouseLeave = () => {isHovered.current = false;startScrolling(false);};useEffect(() => {// 先设置为初始数据setDoubleData([...dataSource]);}, [dataSource]);// 开始滚动useEffect(() => {// 创建两倍数据用于实现无缝滚动if (tableHasScroll() && doubleData.length === dataSource.length) {setDoubleData([...dataSource, ...dataSource]);}startScrolling(true);return () => stopScrolling();}, [tableRef.current, doubleData]);return (<divref={(el) => (scrollHeight.current = el?.clientHeight || 0)}className={styles["infinite-scroll-table"]}onMouseEnter={handleMouseEnter}onMouseLeave={handleMouseLeave}><Tableref={tableRef}columns={columns}dataSource={doubleData}pagination={false}scroll={{ y: scrollHeight.current - 57 }}rowClassName={(record, index) =>index % 2 === 0 ? styles["even-row"] : styles["odd-row"]}rowKey={(record: any, index) => (record?.[rowKeyField] ?? "") + index}/></div>);
};export default InfiniteScrollTable;

2、样式

.infinite-scroll-table {position: relative;height: 100%;transition: all 0.3s ease;border: 1px solid rgba(187,187,187,1);.highlight {color: #40a9ff;font-weight: 600;}.even-row {background: rgba(255,255,255);height: 60px;}.odd-row {background: rgba(250,250,250);height: 60px;}:global {.ant-table-header{border-radius: 0;}.ant-table-thead > tr > th {background: rgba(242,242,242) !important;color: #333 !important;font-size: 14px;font-weight: 600;text-align: center;border-start-start-radius: 0 !important;border-start-end-radius: 0 !important;}.ant-table-body {scrollbar-width: none;-ms-overflow-style: none;}.ant-table-cell{font-weight: normal;font-size: 14px;}.ant-table-body::-webkit-scrollbar {display: none;}.ant-table-row:hover > td {background: rgba(64, 144, 255, 0.2) !important;}.ant-table-placeholder .ant-table-cell{border: none;}}}
http://www.lqws.cn/news/183349.html

相关文章:

  • 智能对联网页小程序的仓颉之旅
  • JAVA理论-JAVA基础知识
  • 中国制造名牌剃须刀:优质之选,情礼佳物
  • 中小制造企业的数字化转型,如何控制工业软件应用成本?
  • 中国移动6周年!
  • 手写muduo网络库(零):多线程中使用 weakptr 跨线程监听生命状态
  • 智绅科技 —— 智慧养老 + 数字健康,构筑银发时代安全防护网
  • 微算法科技(NASDAQ:MLGO)基于信任的集成共识和灰狼优化(GWO)算法,搭建高信任水平的区块链网络
  • K8S认证|CKS题库+答案| 3. 默认网络策略
  • 郑州工程技术学院赴埃文科技开展访企拓岗促就业活动
  • 第三方测试机构进行科技成果鉴定测试有什么价值
  • JeecgBoot低代码管理平台
  • 沙市区举办资本市场赋能培训会 点赋科技分享智能消费新实践
  • 超大规模芯片验证:基于AMD VP1902的S8-100原型验证系统实测性能翻倍
  • 因泰立科技H1X激光雷达:因泰立科技为智慧工业注入新动力
  • Unreal从入门到精通之 UE4 vs UE5 VR性能优化实战
  • 开源 vGPU 方案:HAMi,实现细粒度 GPU 切分
  • NLP学习路线图(二十八):BERT及其变体
  • 「基于连续小波变换(CWT)和卷积神经网络(CNN)的心律失常分类算法——ECG信号处理-第十五课」2025年6月6日
  • 2025年,百度智能云打响AI落地升维战
  • 【计算机组成原理 第5版】白、戴编著 第六章 总线系统 课后题总结
  • C++ if语句完全指南:从基础到工程实践
  • Python60日基础学习打卡Day45
  • 在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
  • SCAU数值计算OJ
  • Elasticsearch集群手动分片分配指南:原理与实践
  • 国芯思辰| AD7894的优质替代方案:SC1424模数转换器在分布式控制系统中的应用优势
  • c++中的输入输出流(标准IO,文件IO,字符串IO)
  • 2025年6月6日 奇门遁甲与股市
  • 加密货币钱包开发指南:多链资产管理与非托管安全范式