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

am46iovg 于 2023-01-15 发布在 Ionic

关注(0)|答案(2)|浏览(145)

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

<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秒更新一次conversationChatroom的数组（从API获取数据以检查新的未读消息...）。
当新的数据被替换到conversationChatroom中时，列表会被刷新并自动将视图滚动到顶部。因此，例如，当用户在最后一个聊天室时（他已经滚动到底部），视图会自动滚动到顶部。
我怎样才能阻止这个卷轴？

ionic-framework

来源：https://stackoverflow.com/questions/63170978/how-to-prevent-from-auto-scroll-to-top-when-ion-list-is-updated

2条答案

按热度按时间

q5iwbnjs1#

我需要一个聊天应用程序相同的功能。
我使用了一个反转，每次向列表中添加消息时都重新滚动到列表的底部。
在代码中，添加：

@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
  }

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

赞(0）回复(0）举报 2023-01-15

qxsslcnc2#

我找到了解决方案。这是离子框架中的一个bug，有一个变通方法。在for循环中添加trackBy：trackId。

<ion-list>
  <ion-item *ngFor="let msg of messages;trackBy:trackId" >
    <p> {{ msg.Text }} </p>
  </ion-item>
</ion-list>

并在“组件”页面上添加以下内容

trackId(index: number, fieldObject: any) {
    return fieldObject.id;
  }

贷方：Ionic Bug report

赞(0）回复(0）举报 2023-01-15

我来回答

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

2条答案

相关问题

热门标签

最新问答