网站服务器租赁费用表格,wordpress 自定义文章列表,携程旅行的网站建设,建设官方网站企业登录入口1、效果 2、环境
1、react18
2、antd 4
3、代码实现
原理#xff1a;创建一个定时器#xff0c;修改表格ant-table-body的scrollTop属性实现滚动#xff0c;监听表层的元素div的鼠标移入和移出实现实现鼠标进入元素滚动暂停#xff0c;移出元素的时候表格滚动继续。
一…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);}}TablerowKeyidref{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;
