Question

我尝试了所有解决方案但没有任何效果。我正在构建一个聊天应用程序，我想让它自动滚动到最后一条消息，当新消息出现时它也会滚动到底部。

我在#content上尝试过scrollTo（），但它没有工作

chat.html

<ion-content #content *ngIf="buddy">
  <div class = "chatwindow">
    <ion-list no-lines *ngIf="allmessages">
      <ion-item *ngFor = "let item of allmessages; let i = index" text-wrap>
        <ion-avatar item-left *ngIf="item.sentby === buddy.uid">
          <img src="{{buddy?.photoURL}}">
        </ion-avatar>
        <div class="bubble me" *ngIf="item.sentby === buddy.uid">
          <h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
          <img src="{{item?.message}}" *ngIf="imgornot[i]">
        </div>
        <ion-avatar item-right *ngIf="item.sentby != buddy.uid">
          <img src="{{photoURL}}">
        </ion-avatar>
        <div class="bubble you" *ngIf="item.sentby != buddy.uid">
          <h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
          <img src="{{item?.message}}" *ngIf="imgornot[i]">
        </div>
      </ion-item>
    </ion-list>
  </div>
  </ion-content>

chat.ts

      @ViewChild('content') content: Content;
  scrolltoBottom() {
    setTimeout(() => {
   //   this.content.scrollToBottom();
    }, 1000);
  }

Answer 1

您的代码应该是这样的。

export class ChatPage {

@ViewChild('content') content: Content;

constructor(public navCtrl: NavController) {
    this.scrolltoBottom()
}

scrolltoBottom() {
    setTimeout(() => {
        this.content.scrollToBottom();
    }, 300);
} }

如何使用离子3自动滚动聊天应用程序工作？

1 个答案: