react 中ant design table 表格组件滚动条监听方法

react 中ant design table 表格组件滚动条监听方法

1、包的版本提示## 标题

 "react": "^16.8.6"
  "react-dom": "^16.8.6"
  "antd": "^3.19.5"

2、先上代码

import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import { Table } from 'antd';
import { debounce } from '@/utils/tools';

class BranchCompanyPage extends PureComponent {
      onScrollHandle = () => {
        const table = ReactDOM.findDOMNode(this.table);
        // 获取表格dom元素
        const tableBody = table.querySelector('.ant-table-body');
        // 容器可视区高度
        const tableBodyHeight = tableBody.clientHeight;
        // 内容高度
        const contentHeight = tableBody.scrollHeight;
        // 距离顶部的高度
        const toTopHeight = tableBody.scrollTop;
        // 当距离底部只有0.5时，重新获取数据
        if (contentHeight - (toTopHeight + tableBodyHeight) < 0.5) {
           // 加载数据， 其实这里还可以进行进一步的判断，判断页面是否允许发起请求，
           // 如：数据已经是最后一页了，没有必要再发起请求
        }
    }
  
    render() {
        const columns = [{...}]; // 这里是省略了，自己写配置
        const list = [{...},{...}] // 这里是省略了，自己写配置
        // debounce 为防抖函数
        return(
        	<div onScrollCapture={debounce(this.onScrollHandle, 1000)}> 
                <Table
                    ref={(ref) => this.table = ref} // 绑定ref很重要
                    pagination={false}
                    columns={columns}
                    dataSource={list}
                    scroll={{ x: `calc(${headWidth}px + 50%)`, y: screenHeight - 130 }}
             	 />
            </div>
        )
    }
}

3、提供一个简单的防抖函数给大家

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
export function debounce(fn, delay) {
  let timer = null //借助闭包
  return function () {
    if (timer) {
      clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
    }
    timer = setTimeout(() => {
      console.log('执行事件')
      fn()
    }, delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
  }
}

4、总结

（1）、首先说明，react 不同的组件，其监听方法不一样，我这里用的是class组件，函数式组件的写法不大一样，网上有很多；

（2）、重点是需要用到react的react-dom, 以及给table绑定ref，这个属性的作用就是为了获取table组件的元素；

（3）、滚动条的触发非常平凡，需要防抖；

（4）、涉及到的知识有防抖、节流、闭包、滚动条监听方onScrollCapture。
（5）、获取屏幕距离知识表如下，可做参考