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

Bas*_*art 6 css html5 ionic-framework angular

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

我目前正在使用Ionic Framework:ionic-angular 3.2.0

有谁知道我怎么解决这个问题?

小智 7

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

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

如果要隐藏tabbar,请执行以下代码行:

tabs[key].style.display = 'none';
Run Code Online (Sandbox Code Playgroud)

如果你想显示它,只需将'none'更改为'flex'即可使用此代码.

tabs[key].style.display = 'flex';
Run Code Online (Sandbox Code Playgroud)

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

ngAfterViewInit()
Run Code Online (Sandbox Code Playgroud)

完整代码:

ngAfterViewInit() {
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
        Object.keys(tabs).map((key) => {
            tabs[key].style.display = 'none';
        });
    }
}
Run Code Online (Sandbox Code Playgroud)

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

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

        }
}
Run Code Online (Sandbox Code Playgroud)

希望这能帮到你.


Huy*_*yLe 5

你可以试试这个。

只需将 tabsHideOnSubPages 放入您的配置中,如下所示:

@NgModule({
  declarations: [ MyApp ],
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: true,
    }, {}
  )],
  bootstrap: [IonicApp],
  entryComponents: [ MyApp ],
  providers: []
})
Run Code Online (Sandbox Code Playgroud)