ionic3 + 實用

二級頁面隱藏tabbar

app.module.ts內 @NgModule 下

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: 'true',    // 二級頁面隱藏tabbar
    }
  ]
})

特定頁面隱藏tabbar

在指定頁面的ts 文件內 非.module.ts文件

 ionViewWillEnter() {
    //進入界面資源還沒有加載完成時,設置隱藏下面的tabbar
    var tabs = document.getElementsByClassName('tabbar').item(0);
    tabs['style'].display = 'none';
  }

  //離開頁面的時候，設置顯示下面的tabbar
  ionViewWillLeave(){
    var tabs = document.getElementsByClassName('tabbar').item(0);
    tabs['style'].display = 'flex';
  }

ionic 創建頁面

ionic g page newPage

ionic 跳轉懶加載頁面

原跳轉方式

this.navCtrl.push(LoginPage)

懶加載跳轉方式

this.navCtrl.push('LoginPage')

ionic 跳轉頁面loading加載 封裝

編寫插件，代碼如下：

import { Injectable } from "@angular/core"
import { LoadingController } from "ionic-angular"

@Injectable()
export class LoadingProvider {
  constructor(
    public loadingCtrl: LoadingController
  ) {}
  loading: any
  // 顯示loading
  show() {
    this.loading = this.loadingCtrl.create({
      content: "努力加載中..."
    })
    this.loading.present()
  }
  // 隱藏loading
  hide() {
    if (this.loading) {
      this.loading.dismiss()
    }
  }
}

使用： 在頁面的.ts文件引入

import { LoadingProvider } from "../../providers/loading/loading";

注入(此處僅展示 LoadingProvider 的注入)

 constructor(public loading: LoadingProvider) {}

使用：在頁面進入時hide，在頁面離開時show

  ionViewWillEnter(){
    this.loading.hide()
  }
  ionViewWillLeave () {
    this.loading.show()
  }

同時也可以在請求時進行loading加載等待，賊6