Antd Table 下拉加载数据

背景

使用react+antd开发下拉加载更多数据

image.png

Antd的Table组件本身是不提供滚动事件的；在开发时，需求使用table实现下拉加载数据，根据查询到的实现逻辑能实现下拉刷新数据，其源代码如下：

//使用div包裹Antd  Table,监听div的scroll事件
<div
  onScrollCapture={() => onScrollEvent(this)}
  style={{ height: '350px', overflowY: 'scroll' }}
  ref={c => {
    this.scrollRef = c;
  }}
>
  <Table
    columns={columns}
    dataSource={dataSource}
    pagination={false}
    loading={tableLoading}
    scroll={{ x: '120%'}}
  />
</div>

//js实现： 以下代码在横向滑动时也会加载数据--BUG
onScrollEvent(el) {
    if (el.scrollRef.scrollTop + el.scrollRef.clientHeight === el.scrollRef.scrollHeight) {
        this.queryData(null, "scroll");
    }
  }

若要解决以上代码在横向滑动时也会加载数据的Bug，可尝试以下方法

解决

原理：
纵向滚动时，滚动的高度是时刻在变化的，当纵向滚动时，纵向产生位移，上一次与当前的滚动位置肯定不等，当滚动高度加上容器高度等于可滚动高度则刷新；当为横向滚动时，纵向未产生位移
获取Table元素，使用JS原生scroll事件

//这里Table不放在容器中，使用ref把table元素暴露给this.tableEl
<Table
      columns={columns}
      dataSource={dataSource}
      pagination={false}
      loading={tableLoading}
      scroll={{y: 500}}
      //----------添加如下--------------------------
      ref={(ref)=>this.tableEl=ref}
/>

//在钩子函数中处理
componentDidMount(){
    //注: 为Table设置ID 通过document.getElementById 也可以获取table元素
    const table = ReactDom.findDOMNode(this.tableEl);
    const tableBody = table.querySelector('.ant-table-body');
    let _scrollTop = 0;//保存上次滚动距离
    let isRun = false;//是否执行查询
    tableBody.addEventListener('scroll', () => {
      if(tableBody.scrollTop === 0 ){
        _scrollTop = 0;
      }
      // 上一次滚动高度与当前滚动高度不同则是纵向滚动
      if (_scrollTop != tableBody.scrollTop) {
        //是否滑动到距离底部40px的位置
        const scorll = _scrollTop >= tableBody.scrollHeight-tableBody.clientHeight-40;
        //isRun为true时 代表已经执行查询
        if(isRun && scorll){
          return;
        }
        //_scrollTop < tableBody.scrollTop 判断是否向下滑动
        isRun = _scrollTop < tableBody.scrollTop && scorll;
        //保存当前滚动位置
        _scrollTop = tableBody.scrollTop;
        if (isRun) {
          this.props.onQueryData("scroll");
        }
      }
    })
}

注：react-infinite-scroller楼主没有尝试过，大家可以尝试看是否也能实现下拉刷新

以上代码若有问题欢迎在评论区讨论6

最后编辑于：2019.06.20 14:25:33