angular - 如何检测用户已到达虚拟滚动角度 7 中的列表末尾？

Question

我从 25 个批次的 rest api 获取数据。我正在使用虚拟滚动来显示数据。现在当这 25 个项目滚动时，我需要查询接下来的 25 个项目。如何检测用户何时到达列表末尾？ ?

标签： angularapipaginationvirtualscroll

Answer 1

Get reference of Virtual Scroll using the @ViewChild

 @ViewChild(CdkVirtualScrollViewport)
  viewport: CdkVirtualScrollViewport;

To check scroll reach to end using below code.

const end = this.viewport.getRenderedRange().end;

and using following condition you can determine the reached at end to load next items

const total = this.viewport.getDataLength();
if (end === total) {
    //Load next items
}

Here is example infinite-virtual-scroll-angular