在ionic項(xiàng)目中會(huì)有一些特殊的要求,比如不想使用模態(tài)框,但是又不想顯示tabs欄苗傅。這樣的需求如何才能滿足?找了一些資料之后班巩,總結(jié)列出來:
第一種ionic隱藏全部底部tabs切換菜單的方法: 隱藏全部子頁面的tabs選項(xiàng)界面
找到app.module.ts
文件 渣慕,修改如下代碼:
imports: [
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages: 'true' //隱藏全部子頁面tabs
})
]
第二種:ionic隱藏某個(gè)子頁面的tabs ;
這種方法的缺點(diǎn)是:當(dāng)子頁面使用pop()
方法退出時(shí),父頁面的任何事件都不響應(yīng)抱慌。
import { App } from 'ionic-angular'; //1.引入App類
constructor(private app:App) {} //2.聲明初始化app對象
this.app.getRootNav().push(nextPage); //3.調(diào)用this.app.getRootNav() 從根頁面跳轉(zhuǎn)就可以了
第三種:隱藏指定子頁面的tabs逊桦,此種方式是dom操作的方式,利用ionic的生命周期函數(shù)來完成
*比較推薦使用這種方法
//ionic中當(dāng)頁面進(jìn)入初始化的時(shí)候觸發(fā)的生命周期方法
ionViewDidEnter(){
let elements = document.querySelectorAll(".tabbar");
if (elements != null) {
Object.keys(elements).map((key) => {
elements[key].style.display = 'none';
});
}
}
//ionic當(dāng)退出頁面的時(shí)候觸發(fā)的方法
ionViewWillLeave() {
let elements = document.querySelectorAll(".tabbar");
if (elements != null) {
Object.keys(elements).map((key) => {
elements[key].style.display = 'flex';
});
}
}