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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/254687.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring基础 - Spring简单例子引入Spring要点

Spring基础 - Spring简单例子引入Spring要点 设计一个Spring的Hello World 设计一个查询用户的案例的两个需求&#xff0c;来看Spring框架帮我们简化了什么开发工作 pom依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"htt…

vue3 之 商城项目—登陆

整体认识 登陆页面的主要功能就是表单校验和登陆登出业务 路由配置 模版 <script setup></script><template><div><header class"login-header"><div class"container m-top-20"><h1 class"logo"&g…

第1节、电路连接【51单片机+L298N步进电机系列】

↑↑↑点击上方【目录】&#xff0c;查看本系列全部文章 摘要&#xff1a;本节介绍如何搭建一个51单片机L298N步进电机控制电路&#xff0c;所用材料均为常见的模块&#xff0c;简单高效的方式搭建起硬件环境。 一、硬件清单 ①51单片机模块 ②恒流模块 ③开关电源 ④L298N模…

2024-02-08 Unity 编辑器开发之编辑器拓展1 —— 自定义菜单栏与窗口

文章目录 1 特殊文件夹 Editor2 在 Unity 菜单栏中添加自定义页签3 在 Hierarchy 窗口中添加自定义页签4 在 Project 窗口中添加自定义页签5 在菜单栏的 Component 菜单添加脚本6 在 Inspector 为脚本右键添加菜单7 加入快捷键8 小结 1 特殊文件夹 Editor ​ Editor 文件夹是 …

MYSQL笔记:约束条件

MYSQL笔记&#xff1a;约束条件 主键约束 不能为空&#xff0c;值必须是不同的&#xff08;唯一性&#xff09; 一个表只能修饰一个主键 PRIMARY KEY自增约束 AUTO_INCREMENT唯一键约束 可以为空 unique非空约束 not null 默认值约束 default 外键约束 foreign key …

代码随想录|Day 14

Day 14 新年将至 一、理论学习 BFS 的使用场景总结&#xff1a;层序遍历、最短路径问题(https://leetcode.cn/problems/binary-tree-level-order-traversal/solutions/244853/bfs-de-shi-yong-chang-jing-zong-jie-ceng-xu-bian-l/) BFS 的应用一&#xff1a;层序遍历 BFS …

详述FlinkSql Join操作

FlinkSql 的 Join Flink 官网将其分为了 Joins 和 Window Joins两个大类&#xff0c;其中里面又分了很多 Join 方式 参考文档&#xff1a; Joins | Apache Flink Window JOIN | Apache Flink Joins 官网介绍共有6种方式&#xff1a; Regular Join&#xff1a;流与流的 Joi…

开发JSP应用程序

开发JSP应用程序 问题陈述 TecknoSoft Pvt Ltd.公司的首席技术官(CTO)John Barrett将创建一个应用程序的任务委托给了开发团队,该应用程序应在客户访问其账户详细信息前验证其客户ID和密码。客户ID应是数字形式。John希望如果所输入的客户ID或密码不正确,应向客户显示错误…

Qt可视化大屏布局

科技大屏现在非常流行&#xff0c;这里分享一下某个项目的大屏布局&#xff08;忘了源码是哪个博主的了&#xff09; 展示 这个界面整体是垂直布局&#xff0c;分为两个部分&#xff0c;标题是一个部分&#xff0c;然后下面的整体是一个layout布局&#xff0c;为另外一部分。 l…

【C语言】深入理解指针

目录 1.字符指针 2.指针数组 3.数组指针 4.数组传参与指针传参 一维数组传参 二维数组传参 一级指针传参 二级指针传参 5.函数指针 6.函数指针数组 7.指向函数指针数组的指针&#xff08;了解即可&#xff09; 8.回调函数 回调函数的应用&#xff1a;库函数qsort …

基于ESP8266 开发板(MCU)遥控小车

遥控小车 ​ 遥控界面 ​ 【项目源码】 第一版ESP8266 https://github.com/liyinchigithub/esp8266_car_webServerhttps://github.com/liyinchigithub/esp8266_car_webServer 第二版ESP32 GitHub - liyinchigithub/esp32-wroom-car: 嵌入式单片机 ESP32 Arduino 遥控小车&a…

贵金属交易包括哪些?香港有哪些贵金属交易平台?

随着金融市场的不断发展&#xff0c;贵金属交易作为一种投资方式&#xff0c;越来越受到投资者的关注。贵金属交易不仅具有投资价值&#xff0c;还能够为投资者提供规避风险和保值的工具。本文将介绍贵金属交易的种类和香港的贵金属交易平台。 一、贵金属交易的种类 贵金属交…

红队打靶练习:PHOTOGRAPHER: 1

目录 信息收集 1、arp 2、nmap 3、nikto 目录扫描 1、gobuster 2、dirsearch WEB 信息收集 enum4linux smbclient 8000端口 CMS利用 信息收集 文件上传漏洞利用 提权 信息收集 get user.txt get flag 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# a…

小埋的解密游戏的题解

目录 原题描述&#xff1a; 题目描述 输入格式 输出格式 样例 #1 样例输入 #1 样例输出 #1 样例 #2 样例输入 #2 样例输出 #2 提示 主要思路&#xff1a; 代码实现code&#xff1a; 原题描述&#xff1a; 题目描述 小埋最近在玩一个解密游戏&#xff0c;这个游戏…

秒杀相关问题解决

秒杀 超卖问题 如下,我们先来复现问题,抢购秒杀券的代码逻辑也是很简单, 先判断优惠券是否开始了,是的化,判断库存是否充足,如果是的化,扣减库存,最后创建订单 如下是代码 Override Transactional public Result seckillVoucher(Long voucherId) {//1.查询优惠券SeckillVo…

物联网数据隐私保护技术

在物联网&#xff08;IoT&#xff09;的世界中&#xff0c;无数的设备通过互联网连接在一起&#xff0c;不断地收集、传输和处理数据。这些数据有助于提高生产效率、优化用户体验并创造新的服务模式。然而&#xff0c;随着数据量的剧增&#xff0c;数据隐私保护成为了一个不能忽…

探索设计模式的魅力:外观模式简化术-隐藏复杂性,提供简洁接口的设计秘密

设计模式专栏&#xff1a;http://t.csdnimg.cn/U54zu 目录 引言&#xff1a;探索简化之路 一、起源和演变 二、场景案例分析 2.1 不用模式实现&#xff1a;用一坨坨代码实现 2.2 问题 2.3 外观模式重构代码 定义 界面 接口 利用外观模式解决问题步骤 外观模式结构和说明 重构…

GEE数据集——全球日光日照地图分布图数据

日光地图分布图数据 在社区和专业地图绘制者的支持下&#xff0c;Daylight 是全球开放地图数据的完整分发版。我们将 OpenStreetMap 等项目的全球贡献者的工作与 Daylight 地图合作伙伴的质量和一致性检查相结合&#xff0c;创建了一个免费、稳定和易于使用的街道尺度全球地图。…

【Larry】英语学习笔记语法篇——换一种方式理解词性

目录 一、换一种方式理解词性 1、名词、形容词、副词&#xff0c;这就是一切 2、词性之间的修饰关系 3、介词其实很简单 形容词属性的介词短语 副词属性的介词短语 ①修饰动词 ②修饰形容词 ③修饰其他副词 一、换一种方式理解词性 1、名词、形容词、副词&#xff0c…

【集合系列】TreeMap 集合

TreeMap 集合 1. 概述2. 方法3. 遍历方式4. 排序方式5. 代码示例16. 代码示例27. 代码示例38. 注意事项9. 源码分析 其他集合类 父类 Map 集合类的遍历方式 TreeSet 集合 具体信息请查看 API 帮助文档 1. 概述 TreeMap 是 Java 中的一个集合类&#xff0c;它实现了 SortedMap…