从静态到动态：实现表格自动滚动的全新体验

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 组件，适用于大屏幕应用的需求。这个功能不仅提升了用户体验，还能更好地展示大量数据，方便用户进行操作和查看。

希望你能在自己的项目中运用这些技巧，创造出更出色的用户界面！