Question

请原谅，这是一个简单的问题，还是已经在此处解决。但是，我只是想不通。问题是，我有两个标签。在内容页面中，如果我调用content.scrollToTop（），那么它将正常工作。但是，我不确定在单击或选择选项卡时如何滚动到选项卡内容页面的顶部吗？

 <ion-tabs> 
<ion-tab-bar slot="bottom">

  <ion-tab-button tab="home" **(click)="scrollToTop()"**>
    <ion-label>Home</ion-label>
    <ion-icon name="home"></ion-icon>
    <!-- <ion-badge>6</ion-badge> -->
  </ion-tab-button>

  <ion-tab-button tab="tab1">
    <ion-label>About</ion-label>
    <ion-icon name="information-circle"></ion-icon>
  </ion-tab-button>

  <!-- <ion-tab-button tab="tab2">
    <ion-label>Profile</ion-label>
    <ion-icon name="settings"></ion-icon>
  </ion-tab-button> -->

</ion-tab-bar>

  import { Component, OnInit , ViewChild } from '@angular/core';
  import { Events } from '@ionic/angular';
  import { IonContent } from '@ionic/angular';
  @Component({
  selector: 'app-tabs',
  templateUrl: './tabs.page.html',
  styleUrls: ['./tabs.page.scss'],
  })
  export class TabsPage implements OnInit {
  @ViewChild(IonContent) content: IonContent;
  constructor( public event:Events) { }


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

  }

Answer 1

您可以保留单独的方法

<ion-tabs>
  <ion-tab [root]="tab1Root" (click)="myMethod()"></ion-tab>
  <ion-tab [root]="tab2Root" (click)="myMethod2()"></ion-tab>
  <ion-tab [root]="tab3Root" (click)="myMethod3()"></ion-tab>
</ion-tabs>

然后写下你的逻辑

myMethod()
{
 this.content.scrollToTop();

}

Answer 2

您需要做的是使用ionViewWillEnter事件，该事件可以在Ionic Page Life Cycle文档中进一步解释：

Ionic Page Life Cycle - Ionic Documentation

如果您的页面是tabs2，则代码可能如下所示：

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-tab2',
  templateUrl: './tab2.page.html',
  styleUrls: ['./tab2.page.scss'],
})
export class Tab2Page implements OnInit {

  @ViewChild(IonContent) private content: IonContent;

  constructor() { }

  ngOnInit() {
  }

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

}

选项卡上的内容不会滚动到顶部

2 个答案: