360SDN.COM

首页/Ionic/列表

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

来源:  2018-04-03 13:29:13    评论:0点击:

第一种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';
});
    }

}  

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权