当前位置: 首页 > 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…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...