ionic的生命周期

在这里插入图片描述
利用clik事件触发跳转打印如下:

 jump(){
    this.navCtrl.push(SearchPage)
  }

在这里插入图片描述
利用tab跳转的效果如下:
在这里插入图片描述

利用hash跳转的效果如下
在这里插入图片描述

1.1 ionViewDidLoad

页面加载完成触发,这里的“加载完成”指的是页面所需的资源已经加载完成,但还没进入这个页面的状态(用户看到的还是上一个页面)。

需要注意的是它是一个很傲娇的钩子,全程只会调用一次,即第一次进入页面时被调用,此后你无论怎样进进出出它都冷冷清清凄凄惨惨戚戚不再理你了。除非你把它的后台杀了,重新进入这个软件(在网页调试的时候按刷新也是可以的)。

因此这个钩子适合你做一些一次性的处理,比如从服务器拉取用户数据存到缓存中。

1.2 ionViewWillEnte

字面意义理解就是“我要进来了”的那一刻,这个时候页面刚刚开始切换。你可以在这时对页面的数据进行预处理,这个钩子是每次都会调用的。

1.3 ionViewDidEnter

当这个钩子被触发的时候,用户已经进入到新页面了(页面处于激活状态),同样也是每次都会调用。

1.4 ionViewWillLeave

页面准备 (is about to) 离开时触发,这时用户刚刚触发了返回按钮或者相关的事件。

1.5 ionViewDidLeave

页面已经 (has finished) 离开时触发,页面处于非激活状态了。

1.6 ionViewWillUnload

页面中的资源即将被销毁时触发,此刻你是否会猜测这个钩子与ionViewDidLoad一样,只会被触发一次呢?

1:构造函数在ionViewDidLoad之前被触发
2:ionViewDidLoad只在第一次进入页面时触发
3:ionViewWillUnload会在每次离开页面后触发
4:constructor也是只会触发一次
5:前6个钩子有个共性,他们的返回值都是void,即在相应时刻调用,不会返回任何的信息。

另外两个钩子有些不太一样,它们是可以返回布尔值的ionViewCanEnter和ionViewCanLeave。统称为守卫钩子

1.7 ionViewCanEnter

1.8 ionViewCanLeave

  ionViewCanEnter(): boolean {
    console.log('ionViewCanEnter');
    // return false;    //不允许进入页面
    return true;    //允许进入页面
  }


  ionViewCanLeave(): boolean {
    console.log('ionViewCanLeave');
    return false;    //不允许离开页面
    // return true;    //允许离开页面
  }

作者:忠叔
链接:https://www.jianshu.com/p/72b704b5c9ed
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值