Question

我正在使用Firebase制作内部实时聊天系统。我拨打此电话以获取所有聊天消息的列表：

firebase.database().ref('chatrooms/'+this.roomkey+'/chats').on('value', resp => {

    this.chats = [];
    this.chats = snapshotToArray(resp);

    setTimeout(() => {
        if(this.content._scroll) { this.content.scrollToBottom(0); }
    }, 1000);

});

在我看来，我有这个HTML循环聊天：

<ion-content>
  <ion-list>
    <ion-item *ngFor="let chat of chats" no-lines>
      <div class="chat-status" text-center *ngIf="chat.type==='join'||chat.type==='exit';else message">
        <span class="chat-date">{{chat.sendDate | date:'short'}}</span>
        <span class="chat-content-center">{{chat.message}}</span>
      </div>
      <ng-template #message>
        <div class="chat-message" text-right *ngIf="chat.user === nickname">
          <div class="right-bubble">
            <span class="msg-name">Me</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
        <div class="chat-message" text-left *ngIf="chat.user !== nickname">
          <div class="left-bubble">
            <span class="msg-name">{{chat.user}}</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
      </ng-template>
    </ion-item>
  </ion-list>
</ion-content>

这是我的相关CSS：

ion-content {
  height: 100%;
  overflow: hidden;
  .item-md, .item-ios {
    background: none;
  }
}

目前有30条聊天消息。它们是从Firebase加载的，然后在一秒钟之后，当setTimeout完成时，用户会自动滚动到页面底部，以便他们可以看到最新的消息。这使得页面加载有点奇怪，一秒钟后跳转到页面底部。

有没有办法用一些能够达到用户最初看到最新消息的目标来替换超时？也许有一些触发器可以检测到chats在视图中发生了变化然后滚动？这似乎比固定的1秒暂停更好？

Answer 1

当检测到对聊天列表的更改时，您可以滚动到列表的底部：

将模板参考变量与ion-item元素（例如#chatItems）
使用ViewChildren获取QueryList个ion-item元素
在ngAfterViewInit中，订阅QueryList.changes活动
列表更改时滚动到列表底部

<ion-content>
  <ion-list>
    <ion-item #chatItems *ngFor="let chat of chats" no-lines>
      ...
    </ion-item>
  </ion-list>
</ion-content>

export class MyComponent {

  @ViewChildren("chatItems") chatItems: QueryList<any>;

  ngAfterViewInit() {
    this.scrollContentToBottom();
    this.chatItems.changes.subscribe(() => {
      this.scrollContentToBottom();
    });
  }

  scrollContentToBottom() {
    if(this.content._scroll) { 
      this.content.scrollToBottom(0); 
    }
  }
  ...
}

注意：我使用QueryList<any>因为我不知道ion-item组件类型。如果你知道它是什么，你可以把适当的类型。

滚动到div的底部而不使用setTimeout（）

1 个答案: