背景
使用react+antd開發(fā) 下拉加載更多數(shù)據(jù)
image.png
Antd的Table組件本身是不提供滾動事件的;在開發(fā)時垒酬,需求使用table實現(xiàn)下拉加載數(shù)據(jù),根據(jù)查詢到的實現(xiàn)邏輯能實現(xiàn)下拉刷新數(shù)據(jù)件炉,其源代碼如下:
//使用div包裹Antd Table,監(jiān)聽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實現(xiàn): 以下代碼在橫向滑動時也會加載數(shù)據(jù)--BUG
onScrollEvent(el) {
if (el.scrollRef.scrollTop + el.scrollRef.clientHeight === el.scrollRef.scrollHeight) {
this.queryData(null, "scroll");
}
}
若要解決以上代碼在橫向滑動時也會加載數(shù)據(jù)的Bug勘究,可嘗試以下方法
解決
原理:
縱向滾動時,滾動的高度是時刻在變化的斟冕,當(dāng)縱向滾動時口糕,縱向產(chǎn)生位移
,上一次與當(dāng)前的滾動位置肯定不等磕蛇,當(dāng)滾動高度
加上容器高度
等于可滾動高度
則刷新景描;當(dāng)為橫向滾動時,縱向未產(chǎn)生位移
獲取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}
/>
//在鉤子函數(shù)中處理
componentDidMount(){
//注: 為Table設(shè)置ID 通過document.getElementById 也可以獲取table元素
const table = ReactDom.findDOMNode(this.tableEl);
const tableBody = table.querySelector('.ant-table-body');
let _scrollTop = 0;//保存上次滾動距離
let isRun = false;//是否執(zhí)行查詢
tableBody.addEventListener('scroll', () => {
if(tableBody.scrollTop === 0 ){
_scrollTop = 0;
}
// 上一次滾動高度與當(dāng)前滾動高度不同則是縱向滾動
if (_scrollTop != tableBody.scrollTop) {
//是否滑動到距離底部40px的位置
const scorll = _scrollTop >= tableBody.scrollHeight-tableBody.clientHeight-40;
//isRun為true時 代表已經(jīng)執(zhí)行查詢
if(isRun && scorll){
return;
}
//_scrollTop < tableBody.scrollTop 判斷是否向下滑動
isRun = _scrollTop < tableBody.scrollTop && scorll;
//保存當(dāng)前滾動位置
_scrollTop = tableBody.scrollTop;
if (isRun) {
this.props.onQueryData("scroll");
}
}
})
}
注:
react-infinite-scroller
樓主沒有嘗試過,大家可以嘗試看是否也能實現(xiàn)下拉刷新
以上代碼若有問題歡迎在評論區(qū)討論6