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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ionic创建过程

    编译成功后会在项目下的platforms/android/build/outputs/apk里面生成生成默认名字为android-release-unsigne...

    余生
  • vue-cli脚手架使用

            components:{App}//注册的组件 名称来自import引入时的名字

    余生
  • 微信小程序开发-picker使用

    <picker range='{{数据源}}' value="{{数据源下标}}" bindchange="bindtradeChange"> <view c...

    余生
  • sqoop --split-by详解

    假设有一张表test,sqoop命令中–split-by ‘id’,-m 10,会发生怎样奇特的事情。首先呢,sqoop会去查表的元数据等等,重点说一下s...

    shengjk1
  • Flutter入门(二)

    * Padding(个人感觉和Container很像)(下面的代码很难看,重要的是思路)

    用户3112896
  • iOS架构入门 - MVC模式实例演示

    MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能。除此之外,此模式通过对复杂度的简化,使程序结构更加...

    小蠢驴打代码
  • NameNode主备宕机引发的思考

    大家都知道在双十一这些电商大型营销活动期间,电商网站的访问量等是平时的N倍。每当这个时候到来,无论是开发还是运维人员都严阵以待生怕服务出现问题。很不幸,笔者的一...

    大数据学习与分享
  • Hadoop调优 | NameNode主备宕机引发的思考

    大家都知道在双十一这些电商大型营销活动期间,电商网站的访问量等是平时的N倍。每当这个时候到来,无论是开发还是运维人员都严阵以待生怕服务出现问题。很不幸,笔者的一...

    大数据学习与分享
  • 响应式绿色环保网页

    王凡汎
  • 地理位置geo处理之mysql函数

    原文:https://www.jianshu.com/p/455d0468f6d4

    人生不如戏

扫码关注云+社区

领取腾讯云代金券