Question

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

我的要求是在用户滚动表时从api获取表日期。我尝试使用BlueprintJS表的onCompleteRender道具，但由于我一次就获取了所有页面，因此它不符合我的要求。
我试过的是

  <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事件来监听滚动事件，然后检查是否位于元素底部附近以加载下一页。可以将其实现为

  <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;
    }

如何在blueprint.js表中实现无限滚动

1 个答案: