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

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 (<divonMouseOver={() => {clearInterval(timer);}}onMouseOut={() => {initialScroll(dataSource);}}><TablerowKey="id"ref={tableContainer}pagination={false}scroll={{y: 500,x: '100%',scrollToFirstRowOnChange: true,}}{...props}/></div>);
};
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 (<div className={clsx(['w-1/3', 'h-full', 'px-6', 'py-6', 'text-white'])}><ScrollTable dataSource={DATA_SOURCE} columns={COLUMNS} /></div>);
};
export default ScrollTableExample;

相关文章:

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

1、效果 2、环境 1、react18 2、antd 4 3、代码实现 原理&#xff1a;创建一个定时器&#xff0c;修改表格ant-table-body的scrollTop属性实现滚动&#xff0c;监听表层的元素div的鼠标移入和移出实现实现鼠标进入元素滚动暂停&#xff0c;移出元素的时候表格滚动继续。 一…...

网络安全产品之认识准入控制系统

文章目录 一、什么是准入控制系统二、准入控制系统的主要功能1. 接入设备的身份认证2. 接入设备的安全性检查 三、准入控制系统的工作原理四、准入控制系统的特点五、准入控制系统的部署方式1. 网关模式2. 控制旁路模式 六、准入控制系统的应用场景七、企业如何利用准入控制系统…...

Text2SQL研究-Chat2DB体验与剖析

文章目录 概要业务数据库配置Chat2DB安装设置原理剖析 小结 概要 近期笔者在做Text2SQL的研究&#xff0c;于是调研了下Chat2DB&#xff0c;基于车辆订单业务做了一些SQL生成验证&#xff0c;有了一点心得&#xff0c;和大家分享一下.&#xff1a; 业务数据库设置 基于车辆订…...

JavaScript相关(二)——闭包

了解闭包的前提必须得了解什么是作用域链。也就是&#xff08;一&#xff09;的内容。 参考&#xff1a; 浏览器工作原理与实践 破解前端面试&#xff1a;从闭包说起 闭包 闭包是一个可以访问外部作用域中变量的内部函数&#xff0c;因为内部函数引用了外部函数的变量&#…...

MySQL的DDL语言

DDL&#xff1a;Data Definition Language&#xff08;数据定义语言&#xff09; DDL语言用来定义数据库对象(数据库&#xff0c;表&#xff0c;字段) ps:MySQL中关键字不区分大小写&#xff0c;但是库名、表名等是区分大小写的 一、对数据库操作的DDL 1、查询相关语句&…...

<网络安全>《21 工业安全审计系统》

1 工业安全审计系统 工业审计系统&#xff0c;支持多种工控协议的深度解析&#xff0c;对工控网络中的异常流量进行实时监测和告警&#xff0c;详实记录一切网络通信行为&#xff0c;为工业控制网络安全事件调查提供依据&#xff1b;产品聚焦工业生产安全事件分析&#xff0c;…...

实例分割论文阅读之:《Mask Transfiner for High-Quality Instance Segmentation》

1.摘要 两阶段和基于查询的实例分割方法取得了显著的效果。然而&#xff0c;它们的分段掩模仍然非常粗糙。在本文中&#xff0c;我们提出了一种高质量和高效的实例分割Mask Transfiner。我们的Mask Transfiner不是在规则的密集张量上操作&#xff0c;而是将图像区域分解并表示…...

阿里 EasyExcel 表头国际化

实体类字段使用EasyExcel提供的注解ExcelProperty&#xff0c;value 值写成占位符形式 &#xff0c;匹配 i18n 文件里面的编码。 如&#xff1a; /*** 仓库名称*/ ExcelProperty("{warehouse.record.warehouseName}") private String warehouseName;占位符解析器 A…...

跨境电商新风潮:充分发挥海外云手机的威力

在互联网行业迅速发展的大环境下&#xff0c;跨境电商、海外社交媒体营销以及游戏产业等重要领域都越来越需要借助海外云手机的协助。 特别是在蓬勃发展的跨境电商领域&#xff0c;像亚马逊、速卖通、eBay等平台&#xff0c;结合社交电商营销和短视频内容成为最有效的流量来源。…...

Kubernetes实战(二十七)-HPA实战

1 HPA简介 HPA 全称是 Horizontal Pod Autoscaler&#xff0c;用于POD 水平自动伸缩&#xff0c; HPA 可以 基于 POD CPU 利用率对 deployment 中的 pod 数量进行自动扩缩容&#xff08;除了 CPU 也可以基于自定义的指标进行自动扩缩容&#xff09;。pod 自动缩放不适用于无法…...

IDEA 配置以及一些技巧

1. IDEA设置 1.1 设置主题 1.2 设置字体和字体大小 1.3 编辑区的字体用ctrl鼠标滚轮可以控制大小 1.4 自动导包和优化多余的包 1.5 设置编码方式 1.6 配置 maven 1.7 设置方法形参参数提示 1.8 设置控制台的字体和大小 注意&#xff1a;设置控制台字体和大小后需要重启IDEA才会…...

Android 11 访问 Android/data/或者getExternalCacheDir() 非root方式

前言&#xff1a; 需求要求安装三方应用ExternalCacheDir()下载下来的apk文件。 getExternalCacheDir() : /storage/emulated/0/Android/data/com../cache/ 获取访问权限 如果手机安卓版本为Android10的时候,可以在AndroidManifest.xml中添加下列代码 android:requestLegacyExt…...

Eclipse安装配置、卸载教程(Windows版)

Eclipse是一个开放源代码的集成开发环境&#xff08;IDE&#xff09;&#xff0c;最初由IBM公司开发&#xff0c;现在由Eclipse基金会负责维护。它是一个跨平台的工具&#xff0c;可以用于开发多种编程语言&#xff0c;如Java、C/C、Python、PHP、Rust等。 Eclipse提供了一个可…...

正点原子--STM32基本定时器学习笔记(2)

目录 1. 相关寄存器介绍 1.1 控制寄存器 1(TIMx_CR1)​编辑 1.2 DMA/中断使能寄存器(TIMx_DIER) 1.3 状态寄存器(TIMx_SR) 1.4 计数器(TIMx_CNT) 1.5 预分频器(TIMx_PSC) 1.6 自动重装载寄存器(TIMx_ARR) 2. 工程建立 3. 导入tim.c文件 4. 相关HAL库函数介绍 4.1 H…...

学习笔记:正则表达式

正则表达式是文本处理方面功能最强大的工具之一。正则表达式语言用来构造正则表达式&#xff0c;最终构造出来的字符串就称为正则表达式&#xff0c;正则表达式用来完成搜索和替换操作。 本文参考《正则表达式必知必会&#xff08;修订版&#xff09;》《Learning Regular Exp…...

03-抓包_封包_协议_APP_小程序_PC应用_WEB应用

抓包_封包_协议_APP_小程序_PC应用_WEB应用 一、参考工具二、演示案例&#xff1a;2.1、WEB应用站点操作数据抓包-浏览器审查查看元素网络监听2.2、APP&小程序&PC抓包HTTP/S数据-Charles&Fiddler&Burpsuite2.3、程序进程&网络接口&其他协议抓包-WireSh…...

C语言笔试题之实现C库函数 strstr()(设置标志位)

实例要求&#xff1a; 1、请你实现C库函数strstr()&#xff08;stdio.h & string.h&#xff09;&#xff0c;请在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;&#xff1b;2、函数声明&#xff1a;int strStr(char* h…...

什么是IDE,新手用哪个IDE比较好

什么是IDE IDE&#xff08;Integrated Development Environment&#xff0c;集成开发环境&#xff09;是一种为程序员提供软件开发所需的代码编辑、构建、调试等功能于一体的应用程序。IDE通常包含了代码编辑器、编译器、调试器和图形用户界面等工具&#xff0c;这些工…...

Flask 入门6:模板继承

1. 一个网站中&#xff0c;大部分网页的模块是重复的&#xff0c;比如顶部的导航栏&#xff0c;底部的备案信息。如果在每个页面中都重复的去写这些代码&#xff0c;会让项目变得臃肿&#xff0c;提高后期的维护成本。比较好的做法是&#xff0c;通过模板继承&#xff0c;把一…...

欢迎来到操作系统的世界

&#x1f31e;欢迎来到操作系统的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; &#x1f64f;作者水平很有限&#xff0c;如果发现错误&#xff…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...