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

【问题标题】：Hiding Tabs on Sub pages when using ionic2-super-tabs使用 ionic2-super-tabs 时隐藏子页面上的选项卡
【发布时间】：2018-02-06 01:09:26
【问题描述】：

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

在使用 ionic2-super-tabs 时有没有办法隐藏子页面上的标签？

【问题讨论】：

标签： ionic-framework tabs ionic2

【解决方案1】：

ionic2-super-tabs 有一个名为 rootNavCtrl 的 NavController 引用，它会自动添加到所有子选项卡的 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的示例

【讨论】：

【解决方案2】：

在您的根页面 .ts 文件中添加以下代码。参考网址https://github.com/zyra/ionic2-super-tabs

rootPage1.ts 页面示例

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

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

ionViewWillEnter() {
    this.superTabsCtrl.showToolbar(true);
}
}

【讨论】：

【解决方案3】：

我是通过以下方式做到的

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

在根页面中：

this.tabBarElement = document.querySelector('super-tabs-toolbar');

ionViewWillLeave() {
    this.tabBarElement.style.display = 'none';
}

ionViewWillEnter() {
    this.tabBarElement.style.display = 'block';
}

最后，在 supertabs css 中，将高度设置为 100%，默认情况下它将高度设置为 calc(100% - 72px)，当标签栏隐藏时，它会将页面向下推。

所以修改为

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

【讨论】：