ionic 生命周期

转载 2018年04月15日 15:00:59

如官网文档所示,常用的生命周期有如下6个:

EventDesc
ionViewDidLoad当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开这个页面则不会触发
ionViewWillEnter顾名思义,当将要进入页面时触发
ionViewDidEnter当进入页面时触发
ionViewWillLeave当将要从页面离开时触发
ionViewDidLeave离开页面时触发
ionViewWillUnload当页面将要销毁同时页面上元素移除时触发

在demo中加入以下代码:

  1. ionViewDidLoad(){  
  2.         console.log("1.0 ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开这个页面则不会触发");  
  3.     }  
  4.     ionViewWillEnter(){  
  5.         console.log("2.0 ionViewWillEnter 顾名思义,当将要进入页面时触发");  
  6.     }  
  7.     ionViewDidEnter(){  
  8.         console.log("3.0 ionViewDidEnter 当进入页面时触发");  
  9.     }  
  10.     ionViewWillLeave(){  
  11.         console.log("4.0 ionViewWillLeave 当将要从页面离开时触发");  
  12.     }  
  13.     ionViewDidLeave(){  
  14.         console.log("5.0 ionViewDidLeave 离开页面时触发");  
  15.     }  
  16.     ionViewWillUnload(){  
  17.         console.log("6.0 ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");  
  18.     }  
  19.   
  20.     ionViewCanEnter(){  
  21.         console.log("ionViewCanEnter");  
  22.     }  
  23.   
  24.     ionViewCanLeave(){  
  25.         console.log("ionViewCanLeave");  
  26.     }  


运行结果

ionic 零基础开发手机端移动应用视频课程

本课程的内容包括三大部分。 一部分介绍ionic框的CSS布局功能,实现基于移动端应用的各类样式完成的过程。 另一部分介绍ionics框架的各种JS组件,用于完成webapp在移动端的各类与本地应用效果功能实现的过程。 第三部分通过2 个完整的应用案例来贯穿前两部分所学的知识内容。
  • 2017年11月06日 21:11

ionic中ionicView的生命周期

ionicView的生命周期的事件调用在每个ionicView的controller中使用$scope.$on('$ionicView.enter', function() {});调用。 1....
  • pq1230
  • pq1230
  • 2015-07-29 13:51:07
  • 16627

Ionic页面的生命周期

官方文档 如官网文档所示,常用的生命周期有如下6个: Event Desc ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存...
  • wei11556
  • wei11556
  • 2017-02-22 14:23:27
  • 12972

ionic2生命周期(通俗基础入门弱鸡版)

1.在尝试自定义组件的时候,需要初始化组件的样式。发现在构造函数里使用不行,不管是用类名改样式还是用元素标签名改都不行。 constructor() {     console.log('Hell...
  • rrgbf0123
  • rrgbf0123
  • 2017-06-18 12:55:45
  • 3895

Ionic javascript Api | ion-view 视图的生命周期及事件集合

ion-view   一个容器包含内容视图和任何导航以及页眉的信息。当一个视图进入和存在他的父 ionNavView, 该视图同样会发出信息,例如他的标题, 是不是应该存在返回按钮, 是不是相应的 i...
  • jsrgxll
  • jsrgxll
  • 2015-10-10 17:04:30
  • 2260

ionic---ion-view 视图的生命周期

ion-view说明一个容器包含内容视图和任何导航以及页眉的信息。当一个视图进入和存在他的父 ionNavView, 该视图同样会发出信息,例如他的标题, 是不是应该存在返回按钮, 是不是相应的 io...
  • qq_29287973
  • qq_29287973
  • 2017-02-27 17:48:54
  • 966

ionic页面的生命周期

ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开这个页面则不会触发 ionViewWillEnter 顾名思义,当将要进入页面时触...
  • superlover_
  • superlover_
  • 2017-06-15 16:43:54
  • 348

ionic3页面的生命周期钩子

五、Ionic3的生命周期钩子Ionic3框架提供了8个钩子函数,它们分别会在页面生命周期的各个阶段被触发。(1)ionViewDidLoad页面加载完成触发,这里的“加载完成”指的是页面所需的资源已...
  • qq_39585562
  • qq_39585562
  • 2018-03-21 14:43:38
  • 66

Ionic2 NavController模块的生命周期事件

只要出现页面导航,生命周期事件(Lifecycle events)就会被触发。这些事件可以被定义在任何component的 class中。 下面就是一个实例:import { Component }...
  • qq_33315185
  • qq_33315185
  • 2017-03-31 15:21:41
  • 4006

ionicView的生命周期

ionicView的生命周期的事件调用在每个ionicView的controller中使用$scope.$on('$ionicView.enter', function() {});调用。 1.$...
  • quguang65265
  • quguang65265
  • 2016-03-27 17:26:21
  • 1033
收藏助手
不良信息举报
您举报文章:ionic 生命周期
举报原因:
原因补充:

(最多只允许输入30个字)