使用 ionic2-super-tab 时隐藏子页面上的选项卡

Question

我正在使用ionic2-super-tabs，它工作正常。唯一的问题是我无法隐藏子页面上的标签栏，就像我以前在使用和设置时所做的那样 tabsHideOnSubPages： "True" in app.module.ts

使用 ionic2-super-tab 时，有没有办法隐藏子页面上的选项卡？

Answer 1

ionic2-super-tabs有一个对它的NavController的引用，名为rootNavCtrl，它会自动添加到所有子标签的NavParams中。这允许您从根页面而不是内部页面推送页面。这样，您的子页面将被推送到超级选项卡页面的顶部并覆盖选项卡栏。

假设您的超级标签页面有一个名为 Page1Page 的标签，您可以执行此操作...

export class Page1Page {
rootNavCtrl: NavController;
constructor(public navParams: NavParams) {
//get a reference to the NavController of super-tabs
this.rootNavCtrl = navParams.get('rootNavCtrl'); 
}
pushSubPage() {
//use it to push your new subpage
this.rootNavCtrl.push('PageToPush');
}
}

请参阅 https://github.com/zyra/ionic2-super-tabs-example/blob/master/src/pages/page1/page1.ts#L22 中的示例

Answer 2

在根页 .ts 文件中添加以下代码。 引用网址 https://github.com/zyra/ionic2-super-tabs

示例根页1.ts页

import { SuperTabsController } from 'ionic2-super-tabs';

export class rootPage1 {
constructor(private superTabsCtrl: SuperTabsController){}    
ionViewWillLeave() {
this.superTabsCtrl.showToolbar(false);
}
ionViewWillEnter() {
this.superTabsCtrl.showToolbar(true);
}
}

Answer 3

我通过以下方式完成了

我的标签.html文件有 4 个根页面。

在根页面中：

this.tabBarElement = document.querySelector('super-tabs-toolbar');
ionViewWillLeave() {
this.tabBarElement.style.display = 'none';
}
ionViewWillEnter() {
this.tabBarElement.style.display = 'block';
}

最后，在超级选项卡中，css 将高度设置为 100%，因为默认情况下它将高度设置为 calc(100% - 72px(，当选项卡栏隐藏时，这会向下推页面。

因此，将更改作为

super-tabs-container { {
height: calc(100%)! important;
}