Angular 虚拟滚动：到达滚动末尾时追加新项目

Question

我想在我的 Angular 应用程序上使用虚拟滚动。我列表中的项目是远程分页搜索的结果。每次向下滚动到视口的末尾时，我都想加载更多结果（调用下一页）。

这是我的模板：

<div class="container">
    <cdk-virtual-scroll-viewport itemSize="100">
        <li *cdkVirtualFor="let item of searchResult">{{item}}</li>
    </cdk-virtual-scroll-viewport>
</div>

以下是我尝试让它按照我的需要工作：

export class SearchComponent {
    @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
    searchPageNumber: number;
    searchResults: Array<any>;

    constructor(private scrollDispatcher: ScrollDispatcher, private searchService: SearchService) {
        this.searchPageNumber = 0;
        this.searchResults = [];
    }

    ngOnInit(): void {
        this.nextSearchPage(this.searchPageNumber);
    }

    ngAfterViewInit(): void {
        //this.scrollDispatcher.register(this.scrollable);
        //this.scrollDispatcher.scrolled(1000)
        //    .subscribe((viewport: CdkVirtualScrollViewport) => {
        //        console.log('scroll triggered', viewport);
        //    });

        this.virtualScroll.renderedRangeStream.subscribe(range => {
            console.log('range', range);
            console.log('range2', this.virtualScroll.getRenderedRange());
            if (this.virtualScroll.getRenderedRange().end % 10 === 0) {
                this.nextSearchPage(++this.searchPageNumber);
            }
        });
    }

    nextSearchPage(pageNumber: number): void {
        this.searchService.getResults(pageNumber).then((pagedResults) => {
            this.searchResults = this.searchResults.concat(pageResuls);
        });
    }
}

如您所见，我不知道如何仅在滚动条到达列表中当前呈现项目的末尾时才触发对 nextSearchPage 函数的调用（以加载更多结果）。

你知道我该怎么做吗？

Angular 滚动文档很差并且缺少示例，如本 issue 中所述。

Answer 1

CdkScrollable 上有一个函数 measureScrollOffset 可能会有所帮助。您可以订阅滚动事件并检查偏移量以确定您滚动的位置。

  ngAfterViewInit(): void {
    this.scrollDispatcher.scrolled().pipe(
      filter(event => this.virtualScroll.measureScrollOffset('bottom') === 0)
    ).subscribe(event => {
      this.searchPageNumber++;
      this.nextSearchPage(this.searchPageNumber); 
    })

并且滚动项集合变化后需要手动调用detectChange。虽然我还没有找到解决方案，但有一个问题：滚动条将 return 在更改检测后开始。

在此处查看演示：https://stackblitz.com/edit/template-angular7-material-primeng-ckxgzs

编辑：

原来监听滚动结束可能不是一个好主意。更好的方法是监听渲染范围（我相信这是 DOM 中渲染的实际项目）变化。一旦渲染范围结束等于数据长度，就是向集合添加更多数据的时候了。这以某种方式解决了 bar 回到开始的问题。

 ngAfterViewInit(): void {
    this.scrollDispatcher.scrolled().pipe(
      filter(event => this.virtualScroll.getRenderedRange().end === this.virtualScroll.getDataLength())
    ).subscribe(event => {
      this.searchPageNumber++;
      this.nextSearchPage(this.searchPageNumber);
    })

新演示在这里： https://stackblitz.com/edit/template-angular7-material-primeng-fhikcf

老实说，我的想法来自： https://angularfirebase.com/lessons/infinite-virtual-scroll-angular-cdk/ 您可能可以在那里了解更多信息。

Answer 2

解决此问题的最简单方法是使用 scrolledIndexChange。

<cdk-virtual-scroll-viewport itemSize="500" (scrolledIndexChange)="nextBatch($event)">

$event是当前渲染元素的第一个索引。因此，当第一个项目的索引接近列表中项目的末尾时，您可以调用下一页

请记住，项目具有固定高度 (itemSize)，因此很容易确定一次呈现的元素数量。

例如

  nextBatch(index) {
    if (index + $itemsRenderAtTheMoment === this.items.length - 1) {
      this.page ++;
      this.loadMore();
    }
  }

Angular 虚拟滚动：到达滚动末尾时追加新项目

Angular virtual scroll: append new items when reaching the end of scroll

scrollbar

infinite-scroll

angular

virtualscroll

angular-cdk-virtual-scroll