我在Ionic2中寻找类似于
scrollIntoView()的东西,例如在我点击按钮时使用.
ion-content中详述的所有方法都没有帮助.
请看一下
this working plunker
您可以使用scrollTo(x,y,duration)方法(docs).
代码非常简单,首先我们获取目标元素的位置(在这种情况下为< p>< / p>)然后我们在scrollTo(…)方法中使用它.首先是观点：
<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);
}
}
