如何在blueprintjs表中实现无限滚动

Question

有没有人在BlueprintJS表中实现无限滚动？

我的要求是在用户滚动表时从api中获取表数据，我尝试过使用BlueprintJS表的BlueprintJS道具，但它并不满足我的要求，因为所有页面都是一次性获取的。

我试过的是

  <div>
                {this.props.spiders.spiders.length !==0 ?
                <Table numRows={this.props.spiders.spiders.length} defaultRowHeight={45} defaultColumnWidth={180} className="bp3-dark tableheight" onCompleteRender={this.scroll} enableRowHeader={false}>
                    <Column name="Name" cellRenderer={cellRenderer} />
                    <Column name="Developer" cellRenderer={cellRenderer}  />
                    <Column name="Status"  cellRenderer={cellRenderer} />
                    <Column name="Workers" cellRenderer={cellRenderer}  />
                    <Column name="Customer"  cellRenderer={cellRenderer} />
                    <Column name="Last Run"  cellRenderer={cellRenderer} />
                    <Column name="Proxy" cellRenderer={cellRenderer}  />
                </Table> :''}
  </div>

我的scroll方法是

scroll = () =>{
       if(this.props.spiders.next!=null)
       {
           this.props.spiders.page = this.props.spiders.page + 1;
           this.props.pagination()

       }
    }

Answer 1

我们可以使用onWheel事件侦听滚动事件，然后检查是否接近元素底部来加载下一个page.It，如

  <div className="spiderList" id="spidertable" onWheel={this.scrolling} ref="spiders" >
                {this.props.spiders.spiders.length !== 0 ?
                    <Table className="bp3-dark" numRows={this.props.spiders.spiders.length} defaultRowHeight={45} defaultColumnWidth={180} enableRowHeader={false} >
                        <Column name="Name" cellRenderer={cellRenderer} />
                        <Column name="Developer" cellRenderer={cellRenderer} />
                        <Column name="Status" cellRenderer={cellRenderer} />
                        <Column name="Workers" cellRenderer={cellRenderer} />
                        <Column name="Customer" cellRenderer={cellRenderer} />
                        <Column name="Last Run" cellRenderer={cellRenderer} />
                        <Column name="Proxy" cellRenderer={cellRenderer} />
                    </Table> : ''}
            </div>

滚动处理程序需要检查div的底部是否已经到达，可以使用

 scrolling() {
        const table = document.getElementById('spidertable')
        if (this.isBottom(table)) {
            if (this.props.spiders.next != null && this.props.loading === false) {
                this.props.spiders.page = this.props.spiders.page + 1;
                //call the api to fetch more table pages
            }
        }
    }

我们可以使用以下方法检测用户是否已滚动到表的底部

 isBottom(el) {
        return el.getBoundingClientRect().bottom <= window.innerHeight;
    }