ngx-infinite-scroll 滚动事件不会停止触发

Question

我用 ngx-infinite-scroll 实现了无限滚动。当用户到达可滚动元素的底部（具有固定高度）时，事件 'scrolled' 将触发并调用 API 以将更多项目加载到该元素中。

问题是，当我显示更多数据时，滚动级别会自动更改并且事件会再次触发。我只想让这个事件由用户手动触发。当我加载更多数据时，有没有办法阻止滚动级别？

   <div
        class="project-feed-container"
        infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="50"
        [alwaysCallback]="true"
        [scrollWindow]="false"
        (scrolled)="onScroll()"
    >

       <!-- *ngFor with content -->

    </div>

Answer 1

这是 API 响应触发新请求的可能解决方案。它基于检查应用程序是否可以执行新请求的几个标志。

canLoad。它控制应用程序是否可以从 API.

加载新项目

pendingLoad。保留将在下一次轮询迭代时触发的排队操作。

// NgOnInit to set a time interval to check status. Adjust timing to your need. 
ngOnInit() {
  setInterval( () => {
    this.canLoad = true;
    if ( this.pendingLoad ) {
      this.onScrollDown();
    }
  }, 2000);
}

然后，当触发滚动功能时，应用程序应检查是否允许调用 API 并添加新元素。

onScrollDown() {
    if ( this.canLoad ) {
      this.canLoad = false;
      this.pendingLoad = false;

      // Call API here
      this.appendItems(0, apiData);
    } else {
      this.pendingLoad = true;
    }
  }

这是一个带有演示的 StackBlitz link。

Answer 2

您可以在您的标签中使用可选输入 [infiniteScrollDisabled] 并通过您的打字稿设置布尔值。

 <div
        class="project-feed-container"
        infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="50"
        [infiniteScrollDisabled]="scrollCheck"
        [alwaysCallback]="true"
        [scrollWindow]="false"
        (scrolled)="onScroll()"
    >
    </div>

检查 ts 文件中所需的适当条件，并将布尔值设置为 true

scrollCheck: boolean = false;

onScrollDown() {
    if(condition){
       this.scrollCheck=true;
    }
    //other code
}

Answer 3

在我的例子中，它有助于将无限滚动距离设置为 0，因为这样它只会在滚动结束时发出新请求我的代码是这样的：

<div infiniteScroll (scrolledUp)="onScrollUp()" (scrolled)="onScrollDown()" [scrollWindow]="false" [infiniteScrollDistance]="0">

ngx-infinite-scroll 滚动事件不会停止触发

ngx-infinite-scroll scrolled event won't stop firing

infinite-scroll

angular