ant design 监听Table 组件滚动到底部

最新推荐文章于 2024-02-21 10:24:42 发布

原创最新推荐文章于 2024-02-21 10:24:42 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

React 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在React.js应用中，使用Ant Design的Table组件实现监听滚动到底部的功能，主要涉及JavaScript和前端开发技巧。

import React, { useRef, forwardRef, useState, useEffect } from 'react'
import { useMount, useMouse, useDebounceFn } from 'ahooks';
import { Table, Tag, Space } from 'antd';

function test() {

  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '3',
      name: '胡彦祖3',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '4',
      name: '胡彦祖4',
      age: 42,
      address: '西湖区湖底公园1号4',
    },
    {
      key: '5',
      name: '胡彦祖5',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '6',
      name: '胡彦祖6',
      age: 46,
      address: '西湖区湖底公园1号6',
    },
  ];
  
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  let el = useRef();

  const { run } = useDebounceFn(
    () => {
      let d = document.querySelector('#table .ant-table-body');
      console.log(d?.scrollHeight, 'offsetHeight')
      console.log(d?.clientHeight, 'clientHeight')
      console.log(d?.scrollTop, 'd');
      console.log(d?.scrollHeight - d?.clientHeight - d?.scrollTop, 'd?.scrollHeight - d?.clientHeight - d?.scrollTop')
      if (d?.scrollHeight - d?.clientHeight - d?.scrollTop < 2) {
        console.log('马上快移动到底部')
        // ajax 分页逻辑 请求下一页
      }
    },
    {
      wait: 1000,
    },
  );


  return (
    <div style={{position: 'relative'}}>
      <div onScrollCapture={run} ref={el}>
        <Table id="table" dataSource={dataSource} columns={columns} scroll={{y: 140}} />
      </div>
    </div>
  )
}


export default test