如何在ionic 3中滑动到页面顶部

Question

我正在用 ionic 3 开发一个 SIgnup 页面，字段数是 10。所以我使用 p 标签来显示验证，当用户点击提交时，我想把他一直带到页面的开头，该页面有我的 header 和 all.How 我可以实现这个吗？我已经尝试了一切。下面是我的代码：

<ion-content padding class="label-cl green-bg acct-sct item-row" style="position:fixed">
  <h2 class="center-col">Create An Account</h2>
  <form #f="ngForm" (ngSubmit)="signUp(f)">
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text" name="name" ngModel required></ion-input>
    </ion-item>
    <p style="color:red;text-align: left" *ngIf="usernameError">Invalid Username</p>
    <ion-item>
      <ion-label floating>Email</ion-label>
      <ion-input type="email" name="email" ngModel required></ion-input>
    </ion-item>
    <p style="color:red;text-align: left" *ngIf="emailError">Invalid E-mail</p>
    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="Password" name="password" ngModel required></ion-input>
    </ion-item>
    <p style="color:red;text-align: left" *ngIf="passwordLengthError">Invalid Password</p>
    <ion-item>
      <ion-label floating>Confirm Password</ion-label>
      <ion-input type="Password" name="confirm_password" ngModel required></ion-input>
    </ion-item>
    <div class="button-inline">
      <button ion-button class="yellow-cl" [disabled]="!f.valid">Submit</button>
    </div>
  </form>
</ion-content>

它有更多字段，但为了清楚起见，我只显示这些字段。提前致谢。

Answer 1

将以下代码添加到您的 .ts 文件

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

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

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

我们使用 Angular 的 @ViewChild 注释来获取对具有方法 scrollToTop().

的离子内容组件的引用

在 Official docs

中查找更多详细信息

如何在ionic 3中滑动到页面顶部

How to slide to the top of the page in ionic 3

ionic-framework

ionic-view

ionic2

ionic-native

ionic3