如何在離子中轉到頁面的不同部分？

Question

有誰知道如何在離子頁面上轉到特定部分的正確語法？ 我仍在嘗試使用 angular 和 ionic 4。這是我的代碼，每當我按下應該將我定向到當前頁面的第 2 部分的按鈕時，我最終都會轉到不同的頁面。

<div id="section1">
    //some content here
    <ion-button href="#section2>Next</ion-button>
</div>

<div id="section2">
    //some content here
    <ion-button href="#section3>Next</ion-button>
</div>

Answer 1

為此，您可以使用scrollToPoint()方法。

在你的 component.ts 文件中聲明一個方法來獲取元素的位置：

export class SampleComponent {
  @ViewChild(Content) content: Content;

  scrollTo(_id: string) {
      let y = document.getElementById(_id).offsetTop;
      this.content.scrollToPoint(0, y);
  }
}

現在將此方法綁定到您的 scrollTo 方法，並將部分 ID 作為參數發送到您想要滾動的位置。

<div id="section1">
    //some content here
    <ion-button (click)="scrollTo('section2')">Next</ion-button>
</div>

<div id="section2">
    //some content here
    <ion-button (click)="scrollTo('section3')">Next</ion-button>
</div>