1. 程式人生 > >ionic原生tab。使用懶載入的同時不把tab拿出來單獨做一個元件

ionic原生tab。使用懶載入的同時不把tab拿出來單獨做一個元件

做法:

1.每個頁面放一個tab.同時把每個tab對應的icon標識出來。新增一個點選事件。

2.點選事件裡面處理:

判斷點選的是哪個icon,對應的是哪個頁面,要求是點選的時候本頁面不是點選的icon所對應的頁面。(eg在首頁點選首頁頁面不切換,在首頁點選我的頁面才切換)。

3.在html裡面新增Ngclass根據標識顯示不同的樣式

<div class="footBarIcon" (click)="addNavbar(1)" [ngClass]="{'actFontStyle':num == 1}">
  <div class="icon ion-ios-home fontStyle"
></div> 首頁 </div>

addNavbar(index) {
  this.num = index;
if (index == 1 && !this.homePage) {
    this.navCtrl.push("HomePage");
} else if (index == 2 && !this.MessagePage) {
    this.navCtrl.push("MessagePage");
}
  else if (index == 3 && !this.MinePage1) {
    this
.navCtrl.push("MinePage1"); } }