zoukankan      html  css  js  c++  java
  • ionic检测页面生命周期的方法

    ion-view 
    Child of ionNavView

    A container for view content and any navigational and header bar information. When a view enters and exits its parent ionNavView, the view also emits view information, such as its title, whether the back button should be displayed or not, whether the correspondingionNavBar should be displayed or not, which transition the view should use to animate, and which direction to animate.

    Views are cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the $watch cycle. When navigating to a view that is already cached, its scope is reconnected, and the existing element, which was left in the DOM, becomes active again. This can be disabled, or the maximum number of cached views changed in $ionicConfigProvider, in the view’s $state configuration, or as an attribute on the view itself (see below).

    Usage

    Below is an example where our page will load with a ionNavBar containing “My Page” as the title.

    <ion-nav-bar></ion-nav-bar>
    <ion-nav-view>
      <ion-view view-title="My Page">
        <ion-content>
          Hello!
        </ion-content>
      </ion-view>
    </ion-nav-view>

    View LifeCycle and Events

    Views can be cached, which means controllers normally only load once, which may affect your controller logic. To know when a view has entered or left, events have been added that are emitted from the view’s scope. These events also contain data about the view, such as the title and whether the back button should show. Also contained is transition data, such as the transition type and direction that will be or was used.

    Life cycle events are emitted upwards from the transitioning view’s scope. In some cases, it is desirable for a child/nested view to be notified of the event. For this use case, $ionicParentView life cycle events are broadcast downwards.

    $ionicView.loaded

    The view has loaded. This event only happens once per view being created and added to the DOM.

    If a view leaves but is cached, then this event will not fire again on a subsequent viewing.

    The loaded event is good place to put your setup code for the view; however,

    it is not the recommended event to listen to when a view becomes active.

    $ionicView.enter

    The view has fully entered and is now the active view.

    This event will fire, whether it was the first load or a cached view.

    $ionicView.leave

    The view has finished leaving and is no longer the active view.

    This event will fire, whether it is cached or destroyed.

    $ionicView.beforeEnter The view is about to enter and become the active view.
    $ionicView.beforeLeave The view is about to leave and no longer be the active view.
    $ionicView.afterEnter The view has fully entered and is now the active view.
    $ionicView.afterLeave The view has finished leaving and is no longer the active view.
    $ionicView.unloaded The view's controller has been destroyed and its element has been removed from the DOM.
    $ionicParentView.enter

    The parent view has fully entered and is now the active view.

    This event will fire, whether it was the first load or a cached view.

    $ionicParentView.leave

    The parent view has finished leaving and is no longer the active view.

    This event will fire, whether it is cached or destroyed.

    $ionicParentView.beforeEnter The parent view is about to enter and become the active view.
    $ionicParentView.beforeLeave The parent view is about to leave and no longer be the active view.
    $ionicParentView.afterEnter The parent view has fully entered and is now the active view.
    $ionicParentView.afterLeave The parent view has finished leaving and is no longer the active view.

    LifeCycle Event Usage

    Below is an example of how to listen to life cycle events and access state parameter data

    $scope.$on("$ionicView.beforeEnter", function(event, data){
       // handle event
       console.log("State Params: ", data.stateParams);
    });
    
    $scope.$on("$ionicView.enter", function(event, data){
       // handle event
       console.log("State Params: ", data.stateParams);
    });
    
    $scope.$on("$ionicView.afterEnter", function(event, data){
       // handle event
       console.log("State Params: ", data.stateParams);
    });

    Caching can be disabled and enabled in multiple ways. By default, Ionic will cache a maximum of 10 views. You can optionally choose to disable caching at either an individual view basis, or by global configuration. Please see the Caching section in ionNavView for more info.

    API

    AttrTypeDetails
    view-title
    (optional)
    string

    A text-only title to display on the parent ionNavBar. For an HTML title, such as an image, seeionNavTitle instead.

    cache-view
    (optional)
    boolean

    If this view should be allowed to be cached or not. Please see the Caching section in ionNavView for more info.

    Default true

    can-swipe-back
    (optional)
    boolean

    If this view should be allowed to use the swipe to go back gesture or not.

    This does not enable the swipe to go back feature if it is not available for the platform it's running from,

    or there isn't a previous view. Default true

    hide-back-button
    (optional)
    boolean

    Whether to hide the back button on the parent ionNavBar by default.

    hide-nav-bar
    (optional)
    boolean

    Whether to hide the parent ionNavBar by default.

    http://ionicframework.com/docs/api/directive/ionView/

  • 相关阅读:
    使用Eclipse创建Maven的JSP项目
    MySQL远程访问
    IDEA创建web工程,不用Archetype(超简单)
    IDEA创建web工程(超简单)
    共享软件
    C语言讲义——链表完整代码
    base64图片显示问题
    JAVA 判断一个字符串是否是合法的日期格式?
    SpringBoot配置本地文件映射路径
    SpringBoot读取资源目录下的文件
  • 原文地址:https://www.cnblogs.com/earl-yongchang/p/5521698.html
Copyright © 2011-2022 走看看