Ionic页面的生命周期
2019-11-05 本文已影响0人
itming
我们在做移动端的时候,用的是ionic框架,那么ionic的页面生命周期大家了解吗,现在简要的分析以下ionic的常用页面生命周期。
1.ionViewDidLoad
当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开这个页面则不会触发
2.ionViewWillEnter
当将要进入页面时触发
3.ionViewDidEnter
当进入页面时触发
4.ionViewWillLeave
当将要从页面离开时触发
5.ionViewDidLeave
离开页面时触发
6.ionViewWillUnload
当页面将要销毁同时页面上元素移除时触发
在demo中加入以下代码:
ionViewDidLoad(){
console.log("1.0 ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开这个页面则不会触发");
}
ionViewWillEnter(){
console.log("2.0 ionViewWillEnter 顾名思义,当将要进入页面时触发");
}
ionViewDidEnter(){
console.log("3.0 ionViewDidEnter 当进入页面时触发");
}
ionViewWillLeave(){
console.log("4.0 ionViewWillLeave 当将要从页面离开时触发");
}
ionViewDidLeave(){
console.log("5.0 ionViewDidLeave 离开页面时触发");
}
ionViewWillUnload(){
console.log("6.0 ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");
}
ionViewCanEnter(){
console.log("ionViewCanEnter");
}
ionViewCanLeave(){
console.log("ionViewCanLeave");
}
补充说明:ionViewCanEnter() 和 ionViewCanLeave()这2个很是很有用的守卫(Guard)钩子, 他们返回“布尔值”, 负责控制你是否可以进入页面和离开页。详情请查看:来扯点ionic3[3] 页面的生命周期事件,也就是凡间所说的钩子
既然我们已经知道它能返回布尔值,那么就来试一试吧。因为我们的程序里没有业务逻辑,这里就用一个时间的API来判断吧,我写这篇文章的时候是晚上11点,那么就用getHours来帮助我们测试。
//和蔼可亲的班主任
ionViewCanEnter() :boolean {
if(new Date().getHours()>=8){
console.log('怎么的呢,你看看现在几点了,你那么舒服咋不在家里接着睡吶,给我门外站着去!');
return false;
}
return true;
}
//杏花楼姿态万千的老鸨
ionViewCanLeave() :boolean {
if(new Date().getHours()>=22){
console.log('哎呀公子,你看都这么晚了,最近外面风声那么紧,不如就在我们这儿留宿吧,你看姑娘们都舍不得你回去呢');
return false;
}
return true;
}