javascript - ionic 2 + angular 2:自动滚动到列表/页面/聊天的底部

我正在尝试用两个部分“聊天”和“内容”对页面进行编码。我希望该“聊天”段将页面自动滚动到底部而没有任何效果。聊天是一个带有几个<ion-list>的<ion-item>。

<ion-list>
<ion-item> item 1 </ion-item>
<ion-item> item 2 </ion-item>
....
<ion-item> item 20 </ion-item>
<ion-item> item 21 </ion-item> <!-- user should see directly this item on bottom of the page -->
</ion-list>

我正在使用Javascript，而不是 typescript ，而且我也不想使用jQuery。
谢谢 :)
另外，当我转到“内容”部分并返回“聊天”时，我想再次自动滚动聊天。

最佳答案

这是我的做法:

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>

chatPage.html 中的重要位是#content上的<ion-content>。我将使用#content标识符使用<ion-content>在我的 chatPage.js 中获得对ViewChild的引用。

现在为实际的滚动逻辑:

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

另外，每当我的 chatPage 需要在列表中显示另一条聊天消息(接收到新消息或发送新消息)时，我都会使用以下代码滚动到新的底部:

setTimeout(() => {
  this.content.scrollToBottom(300);//300ms animation speed
});

更新 typescript

当我给出这个答案时，我正在使用Ionic 2项目的JavaScript版本。随着时间的流逝，我切换到TypeScript，但忘了更新答案，因此，这是 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
  }
}