ionic-framework - 单击选项卡按钮时 IONIC 4 滚动到顶部

Question

当我点击标签按钮时我需要滚动到页面顶部，而我已经在这个页面中

我试过了:

 @ViewChild(IonContent,  { static: false }) private content: IonContent;

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

但这不起作用，我尝试将它放在目标页面的 ioViewWillEnter 中，但它仍然只在 ionic 4 中第一次起作用

我也试过将它放在 ionic 选项卡的 ionTabsDidChange 事件中，但只有在选项卡更改时才会触发此事件

Answer 1

我认为您请求了一个棘手的操作，因为这不是标准的做事方式。

通常情况下，该按钮什么都不做，这会让用户意识到他们已经在该选项卡上。

我设置了一个演示项目并尝试了不同的内置事件，但最终还是 tab-button发出 click事件，它到达 shouldChange。 tabs 中的方法在因同一个选项卡而被解雇之前的组件:

https://github.com/ionic-team/ionic/blob/master/core/src/components/tabs/tabs.tsx#L164

有效的是在 tabs.page.html 中向您的选项卡按钮添加点击事件。 :

<ion-tabs>
  <ion-tab-bar slot="bottom">
    {{ snip }}

    <ion-tab-button tab="tab2" (click)="tabButtonClicked('tab2')">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    {{ snip }}
  </ion-tab-bar>

</ion-tabs>

我认为通过使用点击处理程序，您可以获取当前选项卡，并发送您自己的事件:

tabButtonClicked(tabNumber: string) {
    if (tabNumber === this.selectTab) { 
        this.events.publish('tabs', tabNumber); 
    }
}

本指南展示了如何使用 Ionic Events 系统，它允许您将自定义事件传递给系统中的其他组件:

https://alligator.io/ionic/events/

因此您可以使用它来发出自定义的“滚动到顶部”事件，并在选项卡内处理该事件。然后使用您原来的 .scrollToTop()该自定义事件处理程序中的代码。

例如在要滚动的标签页中添加:

@ViewChild(IonContent, { static: false }) private content: IonContent; 

constructor(public events: Events) { 
}

ionViewWillEnter() {
    this.events.subscribe('tabs', tabNumber => {
        if (tabNumber === 'tab1') { 
            this.content.scrollToTop(); 
        } 
    });
}

ionViewDidLeave() {
    this.events.unsubscribe('tabs', () => {} );
}