如何为Ant Design表格实现滚动触底自动切换下一页？

核心思路 #

监听表格滚动容器的滚动事件，判断用户滚动至底部时自动触发下一页数据加载，同时通过状态控制避免重复请求，关联分页逻辑。

具体实现步骤及代码 #

1. 引入React Hooks并定义状态
   在组件内部维护页码、总数据量、加载状态等核心变量：

import { useState, useRef, useEffect } from 'react';
import { Table } from 'antd';

const YourTableComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalDataCount, setTotalDataCount] = useState(0); // 总数据条数
  const [isLoading, setIsLoading] = useState(false);
  const tableScrollRef = useRef(null); // 表格滚动容器引用
  const [filteredData, setFilteredData] = useState([]); // 表格数据源

2. 添加滚动监听逻辑
   通过useEffect绑定滚动事件，判断是否触底：

useEffect(() => {
    const scrollContainer = tableScrollRef.current;
    if (!scrollContainer) return;

    const handleScroll = () => {
      // 加载中或已到最后一页时不触发
      if (isLoading || currentPage >= Math.ceil(totalDataCount / 10)) return;

      const { scrollTop, clientHeight, scrollHeight } = scrollContainer;
      // 滚动至距离底部10px以内时触发翻页
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        setIsLoading(true);
        loadNextPage(currentPage + 1);
      }
    };

    scrollContainer.addEventListener('scroll', handleScroll);
    return () => scrollContainer.removeEventListener('scroll', handleScroll);
  }, [currentPage, totalDataCount, isLoading]);

3. 实现数据加载函数
   编写加载下一页数据的逻辑，更新状态：

const loadNextPage = async (page) => {
    try {
      // 替换为你的实际接口请求逻辑
      const response = await fetch(`your-api-address?page=${page}&pageSize=10`);
      const resData = await response.json();
      // 若为滚动追加数据则用数组合并，若为切换页码替换数据则直接赋值
      setFilteredData(prev => [...prev, ...resData.dataList]);
      setTotalDataCount(resData.total);
      setCurrentPage(page);
    } catch (error) {
      console.error('数据加载失败:', error);
    } finally {
      setIsLoading(false);
    }
  };

  // 初始加载第一页数据
  useEffect(() => {
    loadNextPage(1);
  }, []);

4. 修改Table组件配置
   关联分页状态，获取滚动容器引用：

return (
    <Table
      columns={columns}
      dataSource={filteredData}
      title={() => <> <h3>title</h3></>}
      rowClassName="rowClassName"
      pagination={{
        current: currentPage,
        total: totalDataCount,
        pageSize: 10, // 替换为你的每页条数
        onChange: (page) => {
          // 手动切换页码时更新状态
          setCurrentPage(page);
          // 按需处理手动切换时的数据加载逻辑
          // loadNextPage(page);
        },
        // 若不需要显示分页器，可设置hideOnSinglePage或pagination={false}
      }}
      // 获取表格滚动容器引用
      components={{
        Body: {
          wrapper: (props) => {
            tableScrollRef.current = document.querySelector('.ant-table-body');
            return <tbody {...props} />;
          },
        },
      }}
    />
  );
};

export default YourTableComponent;

注意事项 #

• 防重复请求：必须通过isLoading状态避免数据加载过程中重复触发翻页。
• 数据加载模式：根据需求选择「滚动追加」或「页码切换替换」数据的方式。
• 滚动容器适配：AntD表格默认滚动容器为.ant-table-body，即使设置了scroll={{ y: 500 }}也适用。

内容的提问来源于stack exchange，提问作者maia