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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
ionic的生命周期相关推荐
- 来扯点ionic3[3] 页面的生命周期事件,也就是凡间所说的钩子
首先要做一个诚挚的道歉,作为大四狗,因为升学的事情,断更两个月,所以要感谢各位仁慈的读者没有脱粉(好像也就50个粉丝).这一节,我们延续上一节制作的页面,来讨论声明周期钩子的事情. 以我的经验来看,多 ...
- ionic3 生命周期方法
1.认识ionic的生命周期钩子 截至ionic 3.8.0版本,框架提供了8个钩子函数,它们分别会在页面生命周期的各个阶段被触发,我们来简单了解一下. 1.1 ionViewDidLoad 页面加载 ...
- Ionic生命周期与注意点
需要注意的地方是:在走页面的生命周期以前,会先走构造方法 构造方法只走一次,除非再次创建这个页面.所以如果先push了一个新页面,然后再调用pop()返回到之前的页面,那么是不会走构造方法里面的方法的 ...
- ionic混合开发APP基础知识点及生命周期使用一
导入storage app.module.ts文件 import { IonicStorageModule } from '@ionic/storage'; imports: [BrowserModu ...
- ionic监听android息屏和后台运行的生命周期
Hi,宝宝们,我又来了,我最近遇到一个问题,就是在ionic中监听android的息屏.应用退出在后台运行,之后重新进入应用的事件,这个写过原生的都知道,android会在不用的时间,运行不同的生命周 ...
- Ionic页面的生命周期
官方文档 如官网文档所示,常用的生命周期有如下6个: Event Desc ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开这个页面则不会触 ...
- ionic中关于ionicView 的生命周期
前言 当我们来回切换页面时候,视图被缓存下来,不用每次再去new一个新的视图,可以大大地提高性能.当跳出一个视图后,视图的元素被保存在DOM中,它的作用域也就不在$watch的作用域内,当我们访问一个 ...
- Flutter 笔记 | Flutter 核心原理(一)架构和生命周期
Flutter 架构 简单来讲,Flutter 从上到下可以分为三层:框架层.引擎层和嵌入层,下面我们分别介绍: 1. 框架层 Flutter Framework,即框架层.这是一个纯 Dart实现的 ...
- LTV 即用户生命周期价值
20220321 https://mp.weixin.qq.com/s/kPoojfRCbvCCV4zpnCimmQ 指标计算详细介绍 数据分析|如何做好用户生命周期价值分析 LTV https:// ...
最新文章
- 【深度学习】ResNet的思想
- Core-java面试题第一套上篇
- linux 多线程实现倒计时,Linux用脚本实现“时分秒“倒计时功能
- AtCoder Beginner Contest 183 总结
- java的et5_Javascript与java相同的3des加密(使用etdesede/CBC/PKCS5Padding )
- vs code ipynb文件_UE4引擎 源码的获取、安装,以及VS配置
- VSCode + git 代码托管【当前没有源代码管理提供程序注册】(没有‘+’加法号) - 解决篇
- Magento教程 5:系统安装与备份
- 针对自动化测试的23种Node.js优秀实践
- SourceTree使用笔记 ssh-key配置
- 如何在VirtualBox中安装win7虚拟机?
- 高等数学辅导讲义_《高等数学》考研自用框架体系
- python输出偶数_如何用Python 判断奇偶数
- linux calloc
- ps如何把自己的图与样机结合_Ps如何套用样机图?
- 云原生微服务架构实战精讲第八节 访问控制与更新策略
- intel i5处理器layout及原理图参考
- java的常量和变量_JAVA-常量和变量
- video.js+jquery.danmu.js实现视频播放+发送弹幕
- 德雷福斯(Dreyfus)技能获取模型