angular – 如何在单击时将元素滚动到视图中
发布时间:2020-12-17 07:56:43 所属栏目:安全 来源:网络整理
导读:我在Ionic2中寻找类似于 scrollIntoView() 的东西,例如在我点击按钮时使用. ion-content 中详述的所有方法都没有帮助. 请看一下 this working plunker 您可以使用scrollTo(x,y,duration)方法(docs). 代码非常简单,首先我们获取目标元素的位置(在这种情况下为
我在Ionic2中寻找类似于
scrollIntoView() 的东西,例如在我点击按钮时使用.
请看一下
this working plunker
您可以使用scrollTo(x,y,duration)方法(docs). <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); } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |