在ionic项目中会有一些特殊的要求,比如不想使用模态框,但是又不想显示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';
});
}
}