ionic3+ 中隐藏子页面tabs选项卡的几种方法

客官°小女子只卖身不卖艺 2022-01-30 20:19 211阅读 0赞

# 声明：内容来源 #

# [http://www.ionic.wang/article-index-id-89.html][http_www.ionic.wang_article-index-id-89.html] #

此处做个记录。

# ionic3中隐藏子页面tabs选项卡的几种方法 #

### 第一种ionic隐藏全部底部tabs切换菜单的方法： 隐藏全部子页面的tabs选项界面 ###

找到app.module.ts文件 ，修改如下代码  
  
  
  imports: \[  
    IonicModule.forRoot(MyApp,\{  
      tabsHideOnSubPages: 'true'         //隐藏全部子页面tabs  
    \})  
  \]

##     第二种：ionic隐藏某个子页面的tabs ;      ##

这种方法的缺点是：当子页面使用pop()方法退出时，父页面的任何事件都不响应。  
  
  
  
   import \{ App \} from 'ionic-angular';           //1.引入App类  
   
   constructor(private app:App) \{\}                 //2.声明初始化app对象  
   
   this.app.getRootNav().push(nextPage);       //3.调用this.app.getRootNav() 从根页面跳转就可以了

###  第三种：隐藏指定子页面的tabs，此种方式是dom操作的方式，利用ionic的生命周期函数来完成   ###

//ionic中当页面进入初始化的时候触发的生命周期方法  
ionViewDidEnter()\{  
    let elements = document.querySelectorAll(".tabbar");  
    if (elements != null) \{  
       Object.keys(elements).map((key) => \{  
          elements\[key\].style.display = 'none';  
       \});  
    \}     
   
\}  
  //ionic当退出页面的时候触发的方法  
  
  
ionViewWillLeave() \{  
    let elements = document.querySelectorAll(".tabbar");  
    if (elements != null) \{  
Object.keys(elements).map((key) => \{  
    elements\[key\].style.display = 'flex';  
\});  
    \}

[http_www.ionic.wang_article-index-id-89.html]: http://www.ionic.wang/article-index-id-89.html