Hier ist, wie ich es tat:
chatPage.html
<ion-content #content padding class="chatPage">
<ion-list no-lines>
<ion-item *ngFor="let msg of messages" >
<chat-bubble [message]="msg"></chat-bubble>
</ion-item>
</ion-list>
</ion-content>
Das wichtige Bit in chatPage.html ist #content auf <ion-content>. Ich verwende die #content Kennung, um einen Verweis auf <ion-content> in meinem chatPage.js mit der ViewChild zu erhalten.
nun für die eigentliche Bildlauf-Logik:
chatPage.js
import {Component, ViewChild} from '@angular/core';
@Component({
templateUrl: 'build/pages/chatPage/chatPage.html',
queries: {
content: new ViewChild('content')
}
})
export class ChatPage {
constructor() {
}
//scrolls to bottom whenever the page has loaded
ionViewDidEnter(){
this.content.scrollToBottom(300);//300ms animation speed
}
}
Auch wenn mein chatPage eine andere Chat-Nachricht in der Liste anzuzeigen muss (entweder eine neue Nachricht empfangen wird, oder eine neue Nachricht gesendet wird), habe ich den Code unten bin mit blättern auf den neuen Boden:
setTimeout(() => {
this.content.scrollToBottom(300);//300ms animation speed
});
Update für Typoskript
Als ich diese Antwort gab, arbeitete ich mit der JavaScript-Version des Ionic 2-Projekts. Im Laufe der Zeit wechselte ich Typoskript, aber ich habe vergessen, die Antwort zu aktualisieren, so, hier ist ein kleines Update für chatPage.js (ts):
chatPage.ts
import {Component, ViewChild} from '@angular/core';
@Component({
templateUrl: 'chatPage.html'
})
export class ChatPage {
@ViewChild('content') content:any;
constructor() { }
//scrolls to bottom whenever the page has loaded
ionViewDidEnter(){
this.content.scrollToBottom(300);//300ms animation speed
}
}
http://pnnr.co/edit/7yz2DUttPjI5GVJkvr5h?open = app% 2Fapp.component.ts & p = info – Basit