ionic中ionicView的生命周期

最新推荐文章于 2023-10-12 16:45:00 发布

原创最新推荐文章于 2023-10-12 16:45:00 发布 · 945 阅读

0 ·

CC 4.0 BY-SA版权

h5开发专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Ionic框架中视图的生命周期事件，包括视图加载、激活、关闭等关键阶段，并对比了这些事件与Android及iOS平台对应的方法。

$scope.$on('$ionicView.loaded', function() {
  console.log("$ionicView.loaded");
});
$scope.$on('$ionicView.beforeEnter', function() {
  console.log("$ionicView.beforeEnter");
});
$scope.$on("$ionicView.enter", function() {
  console.log("$ionicView.enter");
});
$scope.$on('$ionicView.afterEnter', function() {
  console.log("$ionicView.afterEnter");
});
 
$scope.$on('$ionicView.beforeLeave', function() {
  console.log("$ionicView.beforeLeave");
});
$scope.$on('$ionicView.leave', function() {
  console.log("$ionicView.leave");
});
$scope.$on('$ionicView.afterLeave', function() {
  console.log("$ionicView.afterLeave");
});
$scope.$on('$ionicView.unloaded', function() {
  console.log("$ionicView.unloaded");
});1.$ ionicView.loaded：视图已经被加载了。这事件只发生一次当视图被创建并添加到Dom中。当跳出页面并且被缓存了的话，再次访问这个页面时这个时间将不会被激活。加载的事件是好地方，把你的设置代码的视图; 然而，这是不推荐的事件收听时的图变得活跃。类似于Android的activity中的onCreate()方法。
2.$ ionicView.enter：进入视图并被激活。这事件被激活来判断这个视图是第一个加载还是被缓存了的。类似于Android的activity中的onStart()方法。
3.$ ionicView.leave：离开这个视图并且不是活动页面。调用这个事件判断应该被缓存还是摧毁。类似于Android的activity中的onStop()方法。
4.$ ionicView.beforeEnter：视图即将被打开变成活动页面。类似于Android的activity中的onResume()方法。
5.$ ionicView.beforeLeave：视图将被关闭并且不是活动页面。类似于Android的activity中的onPause()方法。    
6.$ ionicView.afterEnter：视图已经全面进入，现在是活动视图。类似于iOS的viewDidAppear方法。
7.$ ionicView.afterLeave：视图已经完成离开，非激活页面。类似于iOS的viewDidDisappear方法。
8.$ ionicView.unloaded：视图的Controller已经被摧毁并且他的页面元素也从Dom中移除。类似于Android的activity中的onDestroy()方法。