从静态到动态：实现表格自动滚动的全新体验
1. 引言
在现代前端开发中，展示数据的方式多种多样。特别是在大屏幕应用中，用户需要更直观地查看和操作大量数据。在这种情况下，表格组件便成为了一个非常重要的工具。通过实现表格的自动滚动功能，用户可以轻松浏览长列表，而无需手动滚动，这不仅提升了用户体验，还使得信息的展示更加流畅。尤其是在监控系统、数据分析仪表盘以及管理后台等应用场景中，自动滚动的表格能够有效提高信息的可达性和可视化效果。
下面将介绍如何使用 Ant Design 的 ProTable 组件实现基础表格布局，并通过 JavaScript 控制表格的自动滚动效果。我们还会实现鼠标悬停时暂停滚动和移出时恢复滚动的功能，并确保表头在滚动时保持固定，增强用户在大屏幕下的数据查看体验。
2. 创建 React 项目
在开始之前，确保你的电脑上已经安装了 Node.js。如果尚未安装，可以前往 Node.js 官网 下载并安装最新版本。Node.js 的安装将自动包含 npm（Node 包管理器），这对于管理项目依赖非常重要。
完成 Node.js 安装后，打开终端（命令提示符或 PowerShell），执行以下命令以创建一个新的 React 项目并安装所需的依赖：
npx create-react-app my-app
cd my-protable-project
npm install @ant-design/pro-table antd
在这个步骤中，我们使用 create-react-app 工具创建一个新的 React 项目，并安装了 Ant Design 的 ProTable 组件，以便在项目中使用。
2. 实现表格基本布局
接下来，在 src 目录下创建一个新文件 MyTable.js，并实现基础表格布局。以下是该组件的代码：
import React from 'react';
import ProTable from '@ant-design/pro-table';
const MyTable = () => {
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
];
// 生成100条随机数据
const data = Array.from({ length: 100 }, (_, i) => ({
id: i + 1,
name: `User${i + 1}`,
age: Math.floor(Math.random() * (60 - 18 + 1)) + 18, // 生成18到60之间的随机年龄
}));
return (
<ProTable
columns={columns}
dataSource={data}
rowKey="id"
options={false}
search={false}
pagination={false}
toolBarRender={false}
size="small"
/>
);
};
export default MyTable;
在这个部分，定义了一个名为 MyTable 的组件，其中包含表格的列配置和模拟数据。ProTable 组件的使用使得我们能够快速搭建一个具有良好用户体验的表格。
3. 控制表格体的自动滚动
现在我们需要在 MyTable.js 中添加自动滚动的逻辑。我们将使用 React 的 useRef 和 useEffect Hook 来控制表格的滚动状态。以下是更新后的代码：
import React, { useRef, useState, useEffect } from 'react';
import ProTable from '@ant-design/pro-table';
const MyTable = () => {
const scrollRef = useRef(null); // 用于引用表格的滚动容器
const [isScrolling, setIsScrolling] = useState(true); // 控制滚动状态的状态变量
// 开始或停止滚动的函数
useEffect(() => {
const scrollContainer = scrollRef.current; // 获取滚动容器的引用
let scrollInterval; // 定义定时器
if (isScrolling && scrollContainer) {
scrollInterval = setInterval(() => {
scrollContainer.scrollTop += 1; // 每次增加1个像素的滚动
if (scrollContainer.scrollTop >= scrollContainer.scrollHeight - scrollContainer.clientHeight) {
scrollContainer.scrollTop = 0; // 滚动到底部时回到顶部
}
}, 5); // 控制滚动速度
}
return () => clearInterval(scrollInterval); // 清除定时器
}, [isScrolling]);
return (
<div
ref={scrollRef}
onMouseEnter={() => setIsScrolling(false)} // 鼠标进入停止滚动
onMouseLeave={() => setIsScrolling(true)} // 鼠标离开开始滚动
style={{ height: '500px', overflow: 'hidden' }} // 设置高度和隐藏溢出内容
>
<ProTable
columns={columns}
dataSource={data}
rowKey="id"
options={false}
search={false}
pagination={false}
toolBarRender={false}
size="small"
sticky // 启动表头固定
/>
</div>
);
};
export default MyTable;
在此部分中，创建了一个 scrollRef 来引用表格的滚动容器，并通过定时器实现了表格内容的自动滚动功能。通过 onMouseEnter 和 onMouseLeave 事件，我们可以控制在鼠标悬停时暂停滚动，移出时恢复滚动，这样可以有效提高用户的交互体验。
这里需要注意，在ProTable组件中设置sticky之后就代表将表格header固定，防止表格头也出现滑动的现象。
4. 完整的 App 组件
现在在 src/App.js 中导入并使用 MyTable 组件。以下是 App.js 的代码：
import React from 'react';
import './App.css';
import MyTable from './MyTable';
function App() {
return (
<div className="App">
<h1>自动滚动的 ProTable 示例</h1>
<MyTable />
</div>
);
}
export default App;
这里我们创建了一个简单的应用程序结构，将 MyTable 组件嵌入到 App 组件中，并添加了一个H1标题。
5. 效果演示
现在，你可以启动项目并查看效果。打开终端，执行以下命令：
npm start
然后在浏览器中访问 http://localhost:3000，你应该能够看到一个包含 100 条随机用户数据的 ProTable。表头保持固定，且在鼠标悬停时会暂停自动滚动。
6.完整代码汇总
以下是完整的 MyTable.js 和 App.js 的代码，便于参考：
MyTable.js：
import React, { useRef, useState, useEffect } from 'react';
import ProTable from '@ant-design/pro-table';
const MyTable = () => {
const scrollRef = useRef(null); // 用于引用表格的滚动容器
const [isScrolling, setIsScrolling] = useState(true); // 控制滚动状态的状态变量
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
];
// 生成100条随机数据
const data = Array.from({ length: 100 }, (_, i) => ({
id: i + 1,
name: `User${i + 1}`,
age: Math.floor(Math.random() * (60 - 18 + 1)) + 18,
}));
// 开始或停止滚动的函数
useEffect(() => {
const scrollContainer = scrollRef.current; // 获取滚动容器的引用
let scrollInterval; // 定义定时器
if (isScrolling && scrollContainer) {
scrollInterval = setInterval(() => {
scrollContainer.scrollTop += 1; // 每次增加1个像素的滚动
if (scrollContainer.scrollTop >= scrollContainer.scrollHeight - scrollContainer.clientHeight) {
scrollContainer.scrollTop = 0; // 滚动到底部时回到顶部
}
}, 5); // 控制滚动速度
}
return () => clearInterval(scrollInterval); // 清除定时器
}, [isScrolling]);
return (
<div
ref={scroll
Ref}
onMouseEnter={() => setIsScrolling(false)} // 鼠标进入停止滚动
onMouseLeave={() => setIsScrolling(true)} // 鼠标离开开始滚动
style={{ height: '500px', overflow: 'hidden' }} // 设置高度和隐藏溢出内容
>
<ProTable
columns={columns}
dataSource={data}
rowKey="id"
options={false}
search={false}
pagination={false}
toolBarRender={false}
size="small"
sticky // 启动表头固定
/>
</div>
);
};
export default MyTable;
App.js：
import React from 'react';
import './App.css';
import MyTable from './MyTable';
function App() {
return (
<div className="App">
<h1>自动滚动的 ProTable 示例</h1>
<MyTable />
</div>
);
}
export default App;
通过上述步骤，你已经成功实现了一个具有自动滚动效果的 ProTable 组件，适用于大屏幕应用的需求。这个功能不仅提升了用户体验，还能更好地展示大量数据，方便用户进行操作和查看。
希望你能在自己的项目中运用这些技巧，创造出更出色的用户界面！
原文地址：https://blog.csdn.net/qq_51447436/article/details/142921634
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！