angular - 单击时如何将元素滚动到 View 中

Question

我正在寻找类似于 scrollIntoView() 的东西例如，当我点击一个按钮时，在 Ionic2 中使用。

ion-content 中没有详述的方法帮助。

Answer 1

请看 this working plunker

您可以使用 scrollTo(x,y,duration)方法 (docs) . 代码非常简单，首先我们获取目标元素的位置(在本例中为 <p></p>)然后我们在 scrollTo(...) 中使用它方法。首先是 View :

<ion-header>
  <ion-navbar primary>
    <ion-title>
      <span>My App</span>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <button ion-button text-only (click)="scrollElement()">Click me</button>

  <div style="height: 600px;"></div>

  <!-- Notice the #target in the p element -->
  <p #target>Secret message!</p>

  <div style="height: 600px;"></div>

</ion-content>

以及组件代码:

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

@Component({
  templateUrl:"home.html"
})
export class HomePage {
  @ViewChild(Content) content: Content;
  @ViewChild('target') target: any;

  constructor() {   }

  public scrollElement() {
    // Avoid reading the DOM directly, by using ViewChild and the target reference
    this.content.scrollTo(0, this.target.nativeElement.offsetTop, 500);
  }
}