html - 平滑加载消息 Angular 8

Question

我正在使用 Angular 8 编写一个聊天应用程序，这就是我想要实现的目标: 我的对话组件代表两个用户之间的聊天，在启动后会获取一页最后的消息，其中包含 10 条消息。包含这些消息的 div 向下滚动到最后一条消息。当用户向上滚动并到达某个点时，将加载下一页。两个数组连接起来，用户现在可以看到 20 条消息。这是我到目前为止所拥有的:

HTML:

<div>
  <div #scrollMe [scrollTop]="scrollMe.scrollHeight" (scroll)="onScroll($event)" style="overflow-y: scroll; height: 400px;">
    <ul>
      <li *ngFor="let message of messages?.reverse()">
    </ul>
  </div>
</div>

打字:

loadMessages(page: number, itemsPerPage?: number) {
    this.messageService.getMessageThread(page, itemsPerPage || 10)
      .subscribe((res: PaginatedResult<MessageThread>) => {
        if (this.messages == null) {
          this.messages = res.result.messages;
        } else {
          this.messages = this.messages.concat(res.result.messages);
        }
      });
  }


onScroll(event) {
    if (event.target.scrollTop < 100) {
      if (this.pagination.currentPage >= this.pagination.totalPages) {
        return;
      }

      this.loadMessages(++this.pagination.currentPage);
    }
  }

它有效，但问题是，当我加入这两个数组时，我的滚动条跳得非常难看，并且由于我按住滚动条，它保持在同一位置并继续加载下一页。总的来说，我对 Angular 和前端都很陌生，所以我感觉我错过了一些东西。我试图找到任何现成的解决方案，但找不到。任何帮助将不胜感激。

请注意，我不想使用 JQuery。

Answer 1

几件事:

首先，我们需要一个加载标志:

loading = false;

然后我们让 loadMessages 返回一个可观察对象而不是处理结果:

  loadMessages(page: number, itemsPerPage?: number) {
    this.loading = true;
    return this.messageService.getMessageThread(page, itemsPerPage || 10);
  }

一个单独的方法handleResponse通过将loading设置为false并连接消息来处理响应。

然后我们可以考虑滚动处理程序中的请求延迟，并使用加载标志来防止多个请求:

  onScroll(event) {
    // get the scroll height before adding new messages
    const startingScrollHeight = event.target.scrollHeight;
    if (event.target.scrollTop < 100) {
      if (this.pagination.currentPage >= this.pagination.totalPages) {
        return;
      }

      else if (!this.loading) {
        this.loadMessages(this.pagination.currentPage).subscribe((res) => {
          this.handleResponse(res);
          // using setTimeout lets the app "wait a beat" so it can measure
          // new scroll height *after* messages are added
          setTimeout(() => {
            const newScrollHeight = this.scrollDiv.nativeElement.scrollHeight;
            // set the scroll height from the difference of the new and starting scroll height
            this.scrollDiv.nativeElement.scrollTo(0, newScrollHeight - startingScrollHeight);
          });
        });
      }
    }
  }

Stackblitz (已更新)