Antd Table 下拉加载数据

背景

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


image.png

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

//使用div包裹Antd  Table,监听div的scroll事件
onScrollEvent(this)} style={{ height: '350px', overflowY: 'scroll' }} ref={c => { this.scrollRef = c; }} > //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
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

你可能感兴趣的:(Antd Table 下拉加载数据)