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

Question

我正在从rest中获得25的数据，我使用虚拟滚动显示data.Now，当这25项被滚动时，我需要查询下一个25 items.How来检测用户何时到达列表的末尾？

Answer 1

利用@ViewChild获取虚拟涡旋的参考

 @ViewChild(CdkVirtualScrollViewport)
  viewport: CdkVirtualScrollViewport;

若要使用下面的代码检查滚动到达端。

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

使用下面的条件，您可以确定在端到加载下一项到达的

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

这里是 无限虚涡旋角的例子

Answer 2

将滚动组件作为父组件中的子组件获取。

@ViewChild(CdkVirtualScrollViewport)
viewport: CdkVirtualScrollViewport;

添加在滚动发生时触发的方法。

scrollEvent(): void {
    
  if (this.viewPort.measureScrollOffset('bottom') < 10) {
       // scrolled to the bottom, change  
  }
    
}

在滚动体上触发此方法。

<cdk-virtual-scroll-viewport (scrolledIndexChange)="scrollEvent()"></cdk-virtual-scroll-viewport>