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

Question

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

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>