angular - 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);
  }
}

<强> Demo Plunker