Ionic2如何滾動列表？

Question

我正在使用Ionic2。

我有項目清單。 關於事件（調用messageSend函數），我想滾動到列表頂部。

messages.html

<ion-content padding class="messages-page-content">
    <ion-scroll scrollY="true" class="messages">
  <ion-list class="message-list">
    <ion-item ....

messages.ts

messageSend(va, vi) {
  // scroll to top of list
}

任何建議表示贊賞。

更新

這是一些示例代碼：

<ion-header>
  <ion-navbar>
    <ion-title>
       <ion-avatar item-left class='menu-ion-avatar'><img src='{{you.avatar ? you.avatar : you.avatar64 ? you.avatar64 : you.avatarFirebase ? you.avatarFirebase : "images/blank-profile-picture.png"}}'></ion-avatar> 
        <div class='item-avatar-name'>{{you.displayName}}</div>
        <div class="title-timestamp">{{you.lastAccessDate | amDateFormat: 'D MMM YYYY h:mm a'}}</div>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="messages-page-content">
    <ion-scroll scrollY="true" class="messages">
  <ion-list class="message-list" id="message-list">
    <ion-item class="message-item" *ngFor="let item of firelist | async">
        <div [ngClass]="{'message message-me':(item.memberId1 == me.uid)}">
        <div [ngClass]="{'message message-you':(item.memberId1 == you.uid)}">
                    <div class="message-content">{{item.message_text}}</div>
                    <span class="time-tick">
                        <span class="message-timestamp-date">{{item.timestamp | amDateFormat: 'D MMM YY'}}</span>
                        <span class="message-timestamp">{{item.timestamp | amDateFormat: 'h:mm a'}}</span>
                        <div *ngIf="item.memberId1 === me.uid && item.readByReceiver === true">
                            <span class="checkmark">
                                <div class="checkmark_stem"></div>
                                <div class="checkmark_kick"></div>
                            </span>
                        </div>
                    </span>
                </div>
                </div>
        </ion-item>
  </ion-list>
    </ion-scroll>
</ion-content>

<ion-footer>
  <form #f="ngForm">
    <ion-grid>
      <ion-row>
        <ion-col width-90>
          <ion-input [(ngModel)]="message" name="messageText" required placeholder="message..."></ion-input>
        </ion-col>
        <ion-col width-10 center>
          <button (click)="messageSend(f.value, f.valid)" full [disabled]="f.valid === false"><ion-icon class="message-send" name="send"></ion-icon></button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-footer>

Answer 1

如果列表的頂部也是頁面的頂部，則可以使用內容實例中的scrollToTop()方法，如下所示：

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop();
  }
}

如果不是，則需要獲取元素的位置並使用scrollTo(x,y,duration)方法，如下所示：

import { Component, ViewChild } from "@angular/core";
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage {
  @ViewChild(Content) content: Content;

  constructor() {   }

  public scrollElement() {
    let element = document.getElementById('target');
    this.content.scrollTo(0, element.offsetTop, 500);
  }
}

演示柱塞