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

Question

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

我试过了：

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

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

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

中第一次起作用

我也试过把它放在 ion 选项卡的 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/

因此您可以使用它来发出自定义 "scroll to top" 事件，并在选项卡内处理该事件。然后在该自定义事件处理程序中使用您的原始 .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', () => {} );
}

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

IONIC 4 scroll to top when clicking on tab button

tabs

ionic-framework

ionic4