Question

我试图隐藏子页面中的导航栏和标签（位于底部）我找到了使用访问css样式的解决方案并将display更改为none

我成功隐藏了导航栏和标签，但问题是它仍存在子页面tableView中的空白区域，子页面内容介于两个空格之间，如屏幕截图所示

我该如何解决这个问题？

这是我隐藏导航栏和标签

的代码

    //get all tabs elements
    if (document.querySelector('.tabbar')) {
      this.tabBarElements = document.querySelectorAll('.tabbar.show-tabbar');
    }

    //get all toolbar elements
    if (document.querySelector('.toolbar')) {
      this.toolBarElements = document.querySelectorAll('.toolbar');
    }
  }

  //hide all tabs and the header toolbar when enter page
  ionViewWillEnter() {
    if (this.tabBarElements) {
      this.tabBarElements[0].style.display = 'none';
      this.tabBarElements[1].style.display = 'none';
    }

    if (this.toolBarElements) {
      this.toolBarElements[1].style.display = 'none';
    }

  }

INFO

我发现导致问题的原因（请参见底部的屏幕截图）但我无法通过访问CSS对其进行更改

Answer 1

对于离子2，您可以直接编辑与页面关联的html，如下所示：

<ion-header>
  <!--ion-navbar>      
    <ion-title>
      Login
    </ion-title>
  </ion-navbar-->
</ion-header>

或者如果您想以编程方式执行此操作，您可以执行以下操作：

<ion-header>
 <span *ngIf = "hideNavBar">
   <ion-navbar>      
     <ion-title>
       {{varTitle}}
     </ion-title>
   </ion-navbar>
  </span>
</ion-header>

其中hideNavBar是一个布尔变量，您将在与页面关联的.ts文件中放置在构造函数之前（以及类声明之后），并将其设置为true或false以显示或隐藏导航栏。

Answer 2

告诉内容重新计算其尺寸。动态添加/删除页眉，页脚或标签后，应调用resize（）。

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  resize(){
    this.content.resize();
  }
   ionViewWillEnter() {
         if (this.tabBarElements) {
             this.tabBarElements[0].style.display = 'none';
             this.tabBarElements[1].style.display = 'none';
             this.resize();
         }

         if (this.toolBarElements) {
             this.toolBarElements[1].style.display = 'none';
             this.resize();
         }
     }
}

演示Plunker

Answer 3

我的问题是放置太多标签栏似乎它不受Ionic支持。所以我决定用一个段来改变其中一个，现在好了

如何隐藏Ionic 2中的导航栏和标签？

3 个答案: