标签：react 防抖 const 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）、获取屏幕距离知识表如下，可做参考

标签：react,防抖,const,ant,design,滚动条,组件,table
来源： https://blog.csdn.net/Mrluog/article/details/121837804

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。