0

react antd table滚动条事件如何实现

项目开发中有一个table表格需要做懒加载效果

滚动条事件,就是当table的竖向滚动条到底时,就触发ajax事件再拿一定条数的数据。

2018-09-25 提问
1 个回答
2

已采纳

可以试试 onScrollCapture 监听

类似这样

<div className={styles.center} onScrollCapture={() => this.onScrollEvent()} ref={c => (this.container = c)}>
...
</div>
constructor(props) {
    super(props);
    this.onScrollEvent = this.onScrollEvent.bind(this);
  }

  onScrollEvent() {
    if (this.container.scrollTop + this.container.clientHeight ===         
      this.container.scrollHeight) {
      // todo
    }
  }
1

代码如下:

<div
  onScrollCapture={() => this.onScrollHandle()}
  style={{ height: '659px', overflowY: 'scroll' }}
  ref={c => {
   this.scrollRef = c;
  }}
>
  <BdpTable scroll={{ x: 600 }} noPageNation data={tData} columns={columns} />
</div>

onScrollHandle = () => {
    // eslint-disable-next-line
    const scrollTop = this.scrollRef.scrollTop;
    // eslint-disable-next-line
    const clientHeight = this.scrollRef.clientHeight;
    // eslint-disable-next-line
    const scrollHeight = this.scrollRef.scrollHeight;
    const isBottom = scrollTop + clientHeight === scrollHeight;
    if (isBottom) {
      console.info('到底了!');
    }

2450184176 · 9月25日

展开评论

撰写答案

你可能感兴趣的

推广链接