如何在ionic 5中滚动到聊天页面的底部

Question

我正在使用 ionic 5 构建一个聊天移动应用程序，我希望能够滚动到聊天底部但它不起作用，我在网上搜索但我看到的解决方案不起作用，它只是滚动了一点有点，但还没到聊天结束

这是我的 chat.page.html 代码

<ion-header>
....
</ion-header>

<ion-content class="bg">
    <ion-button expand="block" (click)="scrollContent()">Scroll 1</ion-button>
    <div class="chat-container">
        <div *ngFor="let message of messages; let i=index;" class="chat-bubble" [(ngClass)]="message.type">
            <h6>{{ message.text }}</h6>
            <p>{{ message.created }}</p>
        </div>
    </div>
</ion-content>
<ion-footer>
.......
</ion-footer>

这是 chat.page.ts 的代码

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-chats',
  templateUrl: './chats.page.html',
  styleUrls: ['./chats.page.scss'],
})
export class ChatsPage implements OnInit {

    messages=new Array() 
    @ViewChild(IonContent, { static: false }) content: IonContent;
    constructor(
    ) { }
    
    ngOnInit()  {
        this.messages=[
            { text: "Hey what's up?", type: 'received', created: '14:02' },
            { text: "Nothing", type: 'send', created: '14:05' },
            { text: "Want to go to the movies?", type: 'send', created: '14:05' },
            { text: "I'm sorry, I can't", type: 'received', created: '14:15' },
            { text: "but can we go tomorrow?", type: 'received', created: '14:16' },
            { text: "Nothing", type: 'send', created: '14:05' },
            { text: "Nothing", type: 'send', created: '14:05' },
            { text: "Nothing", type: 'send', created: '14:05' },
            { text: "Nothing", type: 'send', created: '14:05' },
            { text: "I'm sorry, I can't", type: 'received', created: '14:15' },
            { text: "but can we go tomorrow?", type: 'received', created: '14:16' },
        ]
    }
    scrollContent() {
        this.content.scrollToBottom(300)    
    }
}

当我单击按钮时，我希望它使用class="chat-container" 滚动到 div 的底部。 请问我在做什么，这是不对的

Answer 1

试试这个

scrollToBottomSetTimeOut(){

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