在特定子页面上隐藏 Ionic TabBar (IONIC 3)

Posted 2023-03-05

【中文标题】在特定子页面上隐藏 Ionic TabBar (IONIC 3)

【英文标题】：Hide Ionic TabBar on specific subpages (IONIC 3)

【发布时间】：2017-11-18 00:36:09

【问题描述】：

我想在多个特定页面上隐藏我的标签栏。我的主要重点是将其隐藏在我的登录页面、注册页面和评论页面上。我已经尝试过 tabsHideOnSubPages: true，但是当我这样做时，我的 UserProfile 页面 （这是一个子页面）隐藏标签栏。标签栏也必须在 UserProfile 页面上可见，但在我之前提到的子页面（登录、注册等）上也不可见。

我目前正在使用 Ionic 框架：ionic-angular 3.2.0

有谁知道我该如何解决这个问题？

【参考方案1】：

你可以试试这个。

只需将 tabsHideOnSubPages 像这样放在您的配置中：

@NgModule(
  declarations: [ MyApp ],
  imports: [
    IonicModule.forRoot(MyApp, 
      tabsHideOnSubPages: true,
    , 
  )],
  bootstrap: [IonicApp],
  entryComponents: [ MyApp ],
  providers: []
)

【讨论】：

这正是我想要的！谢谢！

【参考方案2】：

我可以给你一个快速的修补程序。

将此代码复制到您的 .ts 页面文件中。 该函数将在页面加载时执行。

如果要隐藏标签栏，请执行以下代码：

tabs[key].style.display = 'none';

如果您想显示它，只需将“none”更改为“flex”即可使用此代码。

tabs[key].style.display = 'flex';

这段代码是一个角度函数，基本上意味着它在页面加载时执行。

ngAfterViewInit()

完整代码：

ngAfterViewInit() 
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) 
        Object.keys(tabs).map((key) => 
            tabs[key].style.display = 'none';
        );
    

如果您离开页面，也可以使用此代码再次显示标签栏。

    ionViewWillLeave() 
        let tabs = document.querySelectorAll('.show-tabbar');
        if (tabs !== null) 
            Object.keys(tabs).map((key) => 
                tabs[key].style.display = 'flex';
            );

        

希望这对你有所帮助。