0

我有大数据。它需要在虚拟滚动中显示。当用户到达页面末尾时，我正在发出 http 请求，然后我正在发出新的请求以获取新的 25 个项目，并添加到现有的项目中。为此我正在使用


@HostListener("window:scroll", [])
  onWindowScroll() {
    if (this.isScrolledIntoView() && !this.showLazyLoadSpinner) {
      this.lazyLoadData();
    }
  }

isScrolledIntoView() {
    if($('#lazyLoadTrigger').offset()) {
      const docViewTop = $(window).scrollTop();
      const docViewBottom = docViewTop + $(window).height();

      const elemTop = $('#lazyLoadTrigger').offset().top;
      const elemBottom = elemTop + $('#lazyLoadTrigger').height();
      return ((elemBottom <= docViewBottom + 1) && (elemTop >= docViewTop));
    }
  }

当((elemBottom <= docViewBottom + 1) && (elemTop >= docViewTop));返回 true 时，这意味着用户滚动到页面的末尾并且它到了末尾，我需要发出 http 请求来获取新数据并添加它。

lazyLoadTrigger在我显示所有项目之后，是 HTML 中最后一个块的 id。

  <app-table-type1 tableDataFlow="auction" [tableData]="searchFilteredData" [type1Headers]="type1TableHeaders"
          [type2Headers]="type2TableHeaders" (linkClicked)="boldSelectedRow($event)" id="auctionMainTable"></app-table-type1>
 <div id="lazyLoadTrigger" style="height: 50px;">
          <div id="lazyLoadSpinner" class="text-center" *ngIf="showLazyLoadSpinner">
            <img class="loading-image" [src]="logo" alt="Loading...">
          </div>
        </div>

我现在如何检测用户何时在页面中间发出这个 http 请求，但不是在最后？

4

1 回答 1

0

该window.scroll事件通常提供具有当前滚动位置的数据。我在您的代码中看到您的onWindowScroll函数不带任何参数。只需添加一个事件参数即可获取有关滚动位置的更多数据。像这样：

HostListener("window:scroll", [])
onWindowScroll(event: any) {
  if (this.isScrolledIntoView() && !this.showLazyLoadSpinner) {
    console.log(event);
    this.lazyLoadData();
  }
}
于 2021-05-26T09:23:44.453 回答