Antd Table 下拉加載數(shù)據(jù)

背景

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末呵燕,一起剝皮案震驚了整個濱河市棠绘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌虏等,老刑警劉巖弄唧,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異霍衫,居然都是意外死亡候引,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門敦跌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來澄干,“玉大人逛揩,你說我怎么就攤上這事◆锓” “怎么了辩稽?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長从媚。 經(jīng)常有香客問我逞泄,道長,這世上最難降的妖魔是什么拜效? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任喷众,我火速辦了婚禮,結(jié)果婚禮上紧憾,老公的妹妹穿的比我還像新娘到千。我一直安慰自己,他們只是感情好赴穗,可當(dāng)我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布憔四。 她就那樣靜靜地躺著,像睡著了一般般眉。 火紅的嫁衣襯著肌膚如雪了赵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天甸赃,我揣著相機與錄音斟览,去河邊找鬼。 笑死辑奈,一個胖子當(dāng)著我的面吹牛苛茂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鸠窗,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼妓羊,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了稍计?” 一聲冷哼從身側(cè)響起躁绸,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎臣嚣,沒想到半個月后净刮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡硅则,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年淹父,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片怎虫。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡暑认,死狀恐怖困介,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蘸际,我是刑警寧澤座哩,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站粮彤,受9級特大地震影響根穷,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜导坟,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一缠诅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧乍迄,春花似錦、人聲如沸士败。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽谅将。三九已至漾狼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間饥臂,已是汗流浹背逊躁。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留隅熙,地道東北人稽煤。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像囚戚,于是被迫代替她去往敵國和親酵熙。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,747評論 2 361