背景

使用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