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