Question

我使用ngx-infinite-scroll实现了无限滚动。当用户到达可滚动元素的底部（具有固定高度）时，“滚动”事件将触发并调用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
}

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

2 个答案: