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(
        	
this.table = ref} // 绑定ref很重要 pagination={false} columns={columns} dataSource={list} scroll={{ x: `calc(${headWidth}px + 50%)`, y: screenHeight - 130 }} /> ) } }
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)、获取屏幕距离知识表如下,可做参考
react 中ant design table 表格组件滚动条监听方法_第1张图片

你可能感兴趣的:(ant,design,问题,react,javascript,前端,reactjs,react.js)