更新离子列表时如何防止自动滚动到顶部

【问题标题】：How to prevent from auto scroll to top when ion-list is updated更新离子列表时如何防止自动滚动到顶部
【发布时间】：2020-07-30 10:12:35
【问题描述】：

我有一个像这样的离子列表：

   <ion-list>
      <ion-item lines="none" color="transparent" *ngFor="let conversationChatroom of conversationChatrooms"  (click)="openChatroom(conversationChatroom)">
         <chatroom-bloc [chatroom]="conversationChatroom"></chatroom-bloc>
      </ion-item>
   </ion-list>

在 .ts 文件中，我每 5 秒更新一次对话聊天室的数组（从 API 获取数据以检查新的未读消息...）。

当新数据被替换到对话聊天室时，列表会刷新并自动将视图滚动到顶部。因此，例如，当用户在最后一个聊天室（他已经滚动到底部）时，视图会自动滚动到顶部。

如何防止这种滚动？

【问题讨论】：

标签： ionic-framework scroll ionic4

【解决方案1】：

聊天应用程序需要相同的功能。

每次向列表中添加消息时，我都会通过重新滚动到列表底部来进行周转。

在您的代码中，添加：

@ViewChild('content', { static: false }) content: any;

content 是列表 ID。

将您的项目添加到列表后，调用以下代码：

setTimeout(() => this.scrollToBottom(), 250); // wait for the list to be locally updated and rendered before scrolling, can be shorter

还有函数本身：

  scrollToBottom() {
    this.content.scrollToBottom(300);  // 300ms animation speed
  }

动画速度设置为平滑效果。

【讨论】：