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

【问题标题】：IONIC 4 scroll to top when clicking on tab button单击选项卡按钮时，IONIC 4滚动到顶部
【发布时间】：2019-11-06 01:05:33
【问题描述】：

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

我试过了：

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

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

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

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

【问题讨论】：

你能分享 stackblitz 还是更多可以解决问题的代码？
@SergeyRudenko 它是一个普通的 ionic 4 个选项卡，如果我与所选选项卡位于同一页面，我只需在按下选项卡按钮时滚动到顶部，我添加的代码是剩下的只是包含网格或列表的普通选项卡

标签： ionic-framework tabs ionic4

【解决方案1】：

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

通常，该按钮不会让用户意识到他们已经在该选项卡上。

我建立了一个演示项目并尝试了不同的内置事件，但最终tab-button 发出了click 事件，并且它在被解雇之前到达tabs 组件中的shouldChange 方法是同一个标签：

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', () => {} );
}

【讨论】：

谢谢伙计，我所做的是 tabs.html 在标签中。 ts: tabButtonClicked(tabNumber: string) { if (tabNumber === this.selectTab) { this.events.publish('tabs', tabNumber); } } 并在 page.ts 中：@ViewChild(IonContent, { static: false }) 私有内容：IonContent;构造函数（私有存储：存储，公共事件：事件）{ this.events.subscribe('tabs', tabNumber => { if (tabNumber === 'tab1') { this.content.scrollToTop(); } }); }
其实我更新了一点，否则你的事件订阅最终会导致内存泄漏
如果您同意它对您有帮助，也请考虑对此进行投票，否则堆栈溢出，根据他们的智慧，已决定这不计入我的 ionic4 标签徽章。
是的，我忘了提到这一点，但我在我的代码中做到了