zoukankan      html  css  js  c++  java

  • Ionic2文档整理

    来自：Rainey's Blog
    原文地址：http://rainey.space/2016/04/06/Ionic2_Chinese_Document/
    Github：https://github.com/XueRainey/ionic2

    ionic2文档整理

    发表于 2016-04-06   |  

    本文档不是英文文档的完全翻译，是个人的阅读笔记。如果阅读后有不明白或者不懂，请移步英文版阅读。
    如果本文有错误，请在本页末尾留言或者提交Issues。

    您可以点击小标题跳转到相应的ionic2英文文档。

    如果本文帮助到了你，请点击此处，帮作者点个star支持一下。

    前言

    声明：本仓库中的例子程序使用了ionic官方的例子ionic-preview-app。

    运行：

    • git clone git@github.com:Raineye/ionic2.git
    • cd ionic-preview-app
    • npm install
    • ionic serve

    ActionSheet

    ActionSheet是一个对话框，让用户选择一个选项。而且用户必须要选择其中一个选项才能恢复与应用程序的交互（点击背景会执行cancel的事件）。当然也可以利用背景或者后退键来取消对话框从而恢复和程序的交互。

    ActionSheet会从一个button数组创建它的按钮选项。每一个按钮都拥有一些属性，例如text handler role 等等。如果handler返回false时，ActionSheet将不会消失。ActionSheet还可以选择有一个标题和副标题。

    如果有一个button的role被设置为cancel那么这个按钮不管位于按钮数组的哪个位置它都会位于底部。ionic官方建议destructive类型的按钮最好位于数组的第一个位置。另外，如果ActionSheet是由于点击背景而被取消的，那么它将会执行和cancle类型的按钮点击一样的事件。

    注意：如果有两个cancle类型的按钮，那么最后一个cancel类型的按钮会覆盖掉前面所有的cancel类型的按钮。

    在创建ActionSheet的第一个参数中，你可以将所有的选项传递进去：`ActionSheet.create(opts)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    openMenu(){
    this.actionSheet = ActionSheet.create({
    title: 'Albums',
    buttons: [
    {
    text: 'Destructive',
    role: 'destructive',
    handler: () => {
    console.log('Destructive clicked');
    }
    },
    {
    text: 'Archive',
    handler: () => {
    console.log('Archive clicked');
    }
    },
    {
    text: 'Cancel',
    role: 'cancel',
    handler: () => {
    console.log('Cancel clicked');
    }
    }
    ]
    })
    this.nav.present(this.actionSheet);
     
    }

    静态方法

    create(opts)

    属性名称类型描述
    title string ActionSheet的标题
    subTitle string ActionSheet的副标题
    cssClass string 自定义样式的css类
    enableBackdropDismiss boolean 用户点击背景是否关闭ActionSheet
    buttons array<any> 显示的按钮的数组

    按钮的属性

    属性名称类型描述
    text string 按钮上显示的文字
    icon icon 按钮上显示的图标
    handler any 点击后执行的函数
    cssClass stirng
    role string 如何显示按钮，destructive或者cancel。如果没有设置此选项，那么将显示默认的按钮。

    实例方法

    setTitle(title)

    属性名称类型描述
    title string 设置ActionSheet的标题

    setSubTitle(subTitle)

    属性名称类型描述
    subTitle string 设置ActionSheet的子标题

    addButton(button)

    属性名称类型描述
    button object ActionSheet的按钮。

    Alert

    Alert是一个对话框，可以向用户提供信息或者收集用户输入的信息。同样用户必须点击某个按钮才能销毁这个对话框。

    和ActionSheet十分相似的是，点击role被设置成cancle的按钮和点击背景所触发的事件是一样的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    constructor(nav: NavController) {
    this.nav = nav;
    }
     
    presentAlert() {
    let alert = Alert.create({
    title: 'Low battery',
    subTitle: '10% of battery remaining',
    buttons: ['Dismiss']
    });
    this.nav.present(alert);
    }
     
    presentConfirm() {
    let alert = Alert.create({
    title: 'Confirm purchase',
    message: 'Do you want to buy this book?',
    buttons: [
    {
    text: 'Cancel',
    role: 'cancel',
    handler: () => {
    console.log('Cancel clicked');
    }
    },
    {
    text: 'Buy',
    handler: () => {
    console.log('Buy clicked');
    }
    }
    ]
    });
    this.nav.present(alert);
    }
     
    presentPrompt() {
    let alert = Alert.create({
    title: 'Login',
    inputs: [
    {
    name: 'username',
    placeholder: 'Username'
    },
    {
    name: 'password',
    placeholder: 'Password',
    type: 'password'
    }
    ],
    buttons: [
    {
    text: 'Cancel',
    role: 'cancel',
    handler: data => {
    console.log('Cancel clicked');
    }
    },
    {
    text: 'Login',
    handler: data => {
    if (User.isValid(data.username, data.password)) {
    // logged in!
    } else {
    // invalid login
    return false;
    }
    }
    }
    ]
    });
    this.nav.present(alert);
    }

    静态方法

    creat(opts)

    Alert选项

    属性名称类型描述
    title string
    subTitle string
    message string Alert显示的信息
    cssClass string
    inputs array Alert显示的输入框数组
    buttons array
    enableBackdropDismiss boolean 点击背景是否销毁Alert

    Input选项

    属性名称类型描述
    type string input的类型，例如：text、tel、number等等
    name string
    placeHolder string input的占位符，未输入时的提示信息。
    value string checkbox的值
    label string checkbox显示的文字
    checked boolean 是否选中
    id string input的标识

    Button的选项

    属性名称类型描述
    text string
    handler any
    cssClass string
    role string null或者cancel

    实例方法

    setTitle(title)

    • title stirng

    setSubTitle(subTitle)

    setMessage(message)

    addButton(button)

    setCssClass(cssClass)

    • cssClass string

      添加css class 到alert的外层。

    App

    app是一个ionic的装饰器，它可以启动应用，是整个ionic应用的主入口。通过一系列的参数作为应用程序的全局配置变量。@App可以接受一个模板属性或者一个模板地址。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import {App} from 'ionic-angular';
     
    @App({
    templateUrl: 'app/app.html',
    providers: [DataService]
    })
     
    export class MyApp{
    // Anything we would want to do at the root of our app
    }

    属性

    属性名称类型描述
    config object app的配置信息
    prodMode boolean 激活Angular的生产模式，在框架内关闭断言和其他检查。默认是false。
    pipes array
    providers array
    template string
    templateUrl string

    Badges

    Badges是一种小部件，通常用于数值显示。

    1
    2
    3
    4
    5
    <ion-item>
    <ion-icon name="logo-twitter" item-left></ion-icon>
    Followers
    <ion-badge item-right>260k</ion-badge>
    </ion-item>

    Badges也可以给与颜色属性<ion-badge secondary></ion-badge>

    Buttons

    Button是ionic中的简单句子，可以显示文本、图标或者都显示。

    属性

    • outline

      带有边框的透明按钮

    • clear

      不带边框的透明按钮

    • round

      大圆角的按钮

    • block

      一个填充其父容器的小圆角按钮

    • full

      填充其父容器的直角按钮

    • small

      一个小尺寸按钮

    • large

      一个大尺寸按钮

    • disabled

      一个不能点击的按钮

    • fab

      一个浮动的按钮

    • fab-left/fab-right/fab-center/fab-top/fab-bottom

      控制浮动按钮的位置

    • color

      动态设置按钮的颜色属性。

    • startend

      在<ion-navbar>中的位置控制

    Icon Buttons

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- Float the icon left -->
    <button>
    <ion-icon name="home"></ion-icon>
    Left Icon
    </button>
     
    <!-- Float the icon right -->
    <button>
    Right Icon
    <ion-icon name="home"></ion-icon>
    </button>
     
    <!-- Only icon (no text) -->
    <button>
    <ion-icon name="home"></ion-icon>
    </button>

    Cards

    Cards是一个css组件

    Card的组成

    就像一个普通的页面一样，cards拥有一个头部和内容。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ion-card>
    <ion-card-header>
    Header
    </ion-card-header>
     
    <img src="img/nin-live.png"/>
     
    <ion-card-content>
    The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
    </ion-card-content>
    </ion-card>

    Checkbox

    复选框拥有一个布尔值来标记自己是否被选中，使用checked可以来默认选中复选框，使用disabled来禁用该复选框。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <ion-item>
    <ion-label>Daenerys Targaryen</ion-label>
    <ion-checkbox dark checked="true"></ion-checkbox>
    </ion-item>
     
    <ion-item>
    <ion-label>Arya Stark</ion-label>
    <ion-checkbox disabled="true"></ion-checkbox>
    </ion-item>
     
    <ion-item>
    <ion-label>Jon Snow</ion-label>
    <ion-checkbox [(ngModel)]="sausage"></ion-checkbox>
    </ion-item>

    特性

    • checked boolean

      复选框是否被选中

    • disabled boolean

      复选框是否禁用

    事件

    • change

      当复选框状态变化时触发

    Config

    用来配置整个应用程序。

    属性

    名称IOS默认MD默认
    activator highlight ripple
    actionSheetEnter action-sheet-slide-in action-sheet-md-slide-in
    actionSheetLeave action-sheet-slide-out action-sheet-md-slide-out

    alertEnter|alert-pop-in |alert-md-pop-in
    alertLeave|alert-pop-out|alert-md-pop-out
    backButtonText| Back
    backButtonIcon| ion-ios-arrow-back| ion-md-arrow-back
    iconMode| ios |md
    menuType |reveal |overlay
    modalEnter| modal-slide-in| modal-md-slide-in
    modalLeave| modal-slide-out| modal-md-slide-out
    pageTransition| ios-transition| md-transition
    pageTransitionDelay| 16| 120
    tabbarPlacement |bottom| top
    tabbarHighlight | |top
    tabbarLayout|
    tabSubPages| |true

    实例方法

    get(key, fallbackValue)

    • key string

      config的键

    • fallbackValue any

    getBoolean(key)

    set(platform,key,value)

    • platform string

      “ios”或者”android”

    Content

    Content组件提供了易于使用的方法来控制滚动，同时可以和其他组件配合实现下拉刷新和上拉加载的功能。

    实例方法

    onScrollElementTransitionEnd()

    scrollTo(x,y,duration,tolerance)

    滚动到具体的坐标

    • x number

      x轴距离

    • y number

      y轴距离

    • duration number

      滚动动画的持续时间

    • tolerance TODO

    此函数执行完毕后，返回一个Promise

    scrollToTop()

    滚动到顶部，执行完毕后返回一个Promise

    getContentDimensions()

    获取content的尺寸

    Events

    Events是一个发布订阅式的事件系统。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // first page (publish an event when a user is created)
    function createUser(user) {
    console.log('User created!')
    events.publish('user:created', user);
    }
     
    // second page (listen for the user created event)
    events.subscribe('user:created', (user) => {
    console.log('Welcome', user);
    });

    实例方法

    subscribe(topic,handler)

    订阅某个事件，当有该事件被发布时，执行handler。

    • topic string

      订阅的主题

    • handler function

    unsubscribe(topic, handler)

    取消订阅某个主题。handler不再接受该主题发布的事件。

    如果handler成功移除，改函数返回true

    `publish(topic,eventData)

    将事件发布到给定的主题

    Grid

    ionic基于flexbox制作了一套网格框架。

    1
    <ion-col width-10>This column will take 10% of space</ion-col>

    列的百分比属性：

    • width-10 10%
    • width-20 20%
    • width-25 25%
    • width-33 33.3333%
    • width-50 50%
    • width-67 66.6666%
    • width-75 75%
    • width-80 80%
    • width-90 90%

    用offset属性来设置列偏移（例如：offset-25）

    HideWhen

    HideWhen用来设置某个平台或者某个屏幕方向时显示的元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div hideWhen="android">
    I am hidden on Android!
    </div>
     
    <div hideWhen="ios">
    I am hidden on iOS!
    </div>
     
    <div hideWhen="android,ios">
    I am hidden on Android and iOS!
    </div>
     
    <div hideWhen="portrait">
    I am hidden on Portrait!
    </div>
     
    <div hideWhen="landscape">
    I am hidden on Landscape!
    </div>

    Icon

    Icon会自动识别平台并使用该平台的设计Icon。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- 自动的识别平台并使用该平台的icon -->
    <ion-icon name="star"></ion-icon>
     
    <!-- 手动设置ios和android平台的图标 -->
    <ion-icon ios="ios-home" md="md-home"></ion-icon>
     
    <!-- 总是使用同一个图标，无论什么平台 -->
    <ion-icon name="ios-clock"></ion-icon>
    <ion-icon name="logo-twitter"></ion-icon>
     
    <!-- 可变的name属性,myIcon是 -->
    <ion-icon [name]="myIcon"></ion-icon>

    属性

    • name string
    • ios string
    • md string

    • isActive bool

      设置该图标是否是活跃的图标。一般会用在tabbar中来将选中的tab图标置为活跃。

    Id

    Id是一个应用程序中元素的唯一标识，可以通过它来获取到元素从而进行访问。

    使用

    1
    <ion-checkbox id="myCheckbox"></ion-checkbox>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    constructor(app: IonicApp) {
    this.app = app
    }
     
    ngAfterViewInit() {
    var checkbox = this.app.getComponent("myCheckbox");
    if (checkbox.checked) {
    console.log('checkbox is checked');
    }
    }

    通过IonicApp服务来访问元素。

    注意：不建议使用Id，因为不能保证注册组件所在的页面是否已经被销毁或者离开当前视图。

    InfiniteScroll

    当用户滚动到页面底部时，可以通过InfiniteScroll执行一个动作。

    可以用来实现上拉加载。

    使用方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ion-content>
     
    <ion-list>
    <ion-item *ngFor="#i of items"></ion-item>
    </ion-list>
     
    <ion-infinite-scroll (infinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
     
    </ion-content>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    @Page({...})
    export class NewsFeedPage {
     
    constructor() {
    this.items = [];
    for (var i = 0; i < 30; i++) {
    this.items.push( this.items.length );
    }
    }
     
    doInfinite(infiniteScroll) {
    console.log('Begin async operation');
     
    setTimeout(() => {
    for (var i = 0; i < 30; i++) {
    this.items.push( this.items.length );
    }
     
    console.log('Async operation has ended');
    infiniteScroll.complete();
    }, 500);
    }
     
    }

    Infinite Scroll Content

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <ion-content>
     
    <ion-infinite-scroll (infinite)="doInfinite($event)">
    <ion-infinite-scroll-content
    loadingSpinner="bubbles"
    loadingText="Loading more data...">
    </ion-infinite-scroll-content>
    </ion-infinite-scroll>
     
    </ion-content>

    实例方法

    state()

    complete()

    调用该方法来表示加载已经完成。

    enable(shouldEnable)

    调用该方法可以设置InfiniteScroll是否处于激活状态。当shouldEnable是false时，InfiniteScroll将被禁用。

    • shouldEnable boolean

    属性

    • threshold string

      设置滚动触发的阙值。例如距离底部还有10%的时候触发事件。

    输出事件

    • infinite

    Input

    ion-input拥有很多文本类型，例如：text password email number search tel 和 url。

    IonicApp

    实例方法

    setTitle(val)

    设置网页标题。

    isProd()

    返回是否生产模式。默认为false。可以在@App中的config中配置。

    isScrolling()

    返回布尔值。

    getComponent()

    获取给定键值的组件。

    Item

    Item的使用有三种方法：

    • 使用<ion-item>来创建一个不可点击文本。
    • 使用 <button ion-item>。通常这个元素会有一个(click)处理程序
    • 使用<a ion-item>当项目需要包含一个链接。

    ItemSliding

    创建一个可滑动的Item。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ion-list>
    <ion-item-sliding *ngFor="#item of items">
    <button ion-item (click)="itemTapped(item)">
     
    </button>
    <ion-item-options>
    <button (click)="favorite(item)">Favorite</button>
    <button (click)="share(item)">Share</button>
    </ion-item-options>
    </ion-item-sliding>
    </ion-list>

    Keyboard

    Keyboard允许你使用ionic键盘插件提供的键盘事件。

    1
    2
    3
    4
    5
    export class MyClass{
    constructor(keyboard: Keyboard){
    this.keyboard = keyboard;
    }
    }

    实例方法

    • isOpen()

      检查键盘是否打开，返回一个boolean

    • onClose(callback)

      当键盘被关闭时回调一个callback
      返回callback

    • close()

      关闭键盘

    List

    实例方法

    enableSlidingItems(shouldEnable)

    是否开启滑动。

    closeSlidingItems()

    关闭滑动作

    LocalStorage

    LocalStorage的储存引擎使用浏览器的本地储存系统储存键值对。

    它只应用于临时储存的数据。
    为保证长期的储存，请使用sqlstorage引擎将数据储存在一个文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import {Page, Storage, LocalStorage} from 'ionic-angular';
    @Page({
    template: `<ion-content></ion-content>`
    });
    export class MyClass{
    constructor(){
    this.local = new Storage(LocalStorage);
    this.local.set('didTutorial', true);
    }
    }

    实例方法

    get(key)

    通过键名来访问LocalStorage中储存的值。

    set(key,value)

    通过键值对储存到LocalStorage

    remove(key)

    删除LocalStorage中储存的键值对

    clear()

    Menu是一个侧滑菜单。

    使用方法

    Menu必须指定一个参考的content。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ion-menu [content]="mycontent">
    <ion-content>
    <ion-list>
    ...
    </ion-list>
    </ion-content>
    </ion-menu>
     
    <ion-nav #mycontent [root]="rootPage"></ion-nav>

    默认情况下菜单在左边滑动，你也可以使用side属性来让它从右边滑出。

    1
    <ion-menu side="right" [content]="mycontent">...</ion-menu>

    如果你只是想简单的使用menu那么你可以使用menuToggle menuClose来控制menu的滑出和收回。

    1
    2
    3
    4
    5
    6
    <button ion-item menuClose="leftMenu" detail-none>
    Close Menu
    </button>
    <button menuToggle>
    <ion-icon name='menu'></ion-icon>
    </button>

    如果你有多个menu从同一边滑出，你可以通过id来控制。

    1
    2
    3
    <ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>
    <ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu>
    <ion-nav #mycontent [root]="rootPage"></ion-nav>
    1
    2
    3
    4
    enableAuthenticatedMenu() {
    this.menu.enable(true, 'authenticated');
    this.menu.enable(false, 'unauthenticated');
    }

    注意：如果你只有一个menu那么请不用使用id控制。尽量避免使用id。

    menu可以设置显示的类型。

    • overlay是传统的MD设计
    • reveal是传统的ios设计

    默认情况下，它们将自动使用当前平台的类型。

    注：原文中还提到了一个push，我试过后发现和reveal是一样的，而且文章中也没有对push进行过多的解释。

    实例方法

    open()

    打开菜单。返回一个Promise,当菜单被完全打开时，你可以执行一个事件。

    close(menuId)

    如果menuId为空，那么将关闭所有打开的菜单，如果menuId被设置，那么将关闭指定的菜单。返回一个Promise

    toggle(menuId)

    菜单开关。如果菜单当前关闭，那么将打开，如果菜单当前打开，将被关闭。
    返回一个Promise。

    enable(menuId)

    当你有多个menu的时候，用于启用或禁用menu。当你启用一个menu那么同方向的其他menu将被禁用。
    返回一个menu实例。

    swipeEnable(shouldEnable,menuId)

    isOpen()

    返回一个布尔值来表示menu是否处于打开状态

    isEnabled

    返回一个布尔值来表示menu是否被启用

    get(menuId)

    返回一个menu实例，如果menuId的menu没有找到，那么将会返回null

    getMenus()

    返回menu实例数组

    该指令可以放在任何按钮，自动的关闭打开的菜单。

    该指令可以放在任何按钮，自动的开关menu。

    Modals

    Modals是一个当前页面上的内容窗口。通常它是用来做选择或者编辑一个项目。

    使用方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    import {Page, Modal, NavController, NavParams} from 'ionic-angular';
     
    @Page(...)
    class HomePage {
     
    constructor(nav: NavController) {
    this.nav = nav;
    }
     
    presentProfileModal() {
    let profileModal = Modal.create(Profile, { userId: 8675309 });
    this.nav.present(profileModal);
    }
     
    }
     
    @Page(...)
    class Profile {
     
    constructor(params: NavParams) {
    console.log('UserId', params.get('userId'));
    }
     
    }

    静态方法

    create(componentType,data)

    • componentType any

      Modal类

    • data object

      传给Modal的数据

    实例方法

    注明：本实例方法在当前英文文档中没有。

    onDismiss(call)

    当Modal被销毁的时候执行的回调函数。
    call是一个回调函数。

    例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    import {IonicApp, Modal, Platform, NavController, NavParams, Page, ViewController} from 'ionic-angular';
     
     
     
    @Page({
    templateUrl: './build/pages/modals/basic/template.html'
    })
    export class BasicPage {
    constructor(public nav: NavController) { }
     
    openModal(characterNum) {
    let modal = Modal.create(ModalsContentPage,{charNum:1});
    this.nav.present(modal);
    modal.onDismiss(data=>{console.log(data)});
    }
    }
     
    @Page({
    templateUrl: './build/pages/modals/basic/modal-content.html'
    })
    class ModalsContentPage {
    character;
     
    constructor(
    public platform: Platform,
    public params: NavParams,
    public viewCtrl: ViewController
    ) {
    this.character = this.params.get('charNum');
    }
     
    dismiss() {
    this.viewCtrl.dismiss({a:1,b:2});
    }
    }

    这是一个基本的导航控制器。

    使用方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import {GettingStartedPage} from 'getting-started';
    @App({
    template: `<ion-nav [root]="rootPage"></ion-nav>`
    })
    class MyApp {
    constructor(){
    this.rootPage = GettingStartedPage;
    }
    }

    Back navigation

    swipeBackEnabled用来控制滑动返回。

    1
    <ion-nav swipeBackEnabled="false" [root]="rootPage"></ion-nav>

    下图是一个App的架构

                      +-------+
                  |  App  |
                  +---+---+
                  <ion-app>
                      |
         +------------+-------------+
         |   Ionic Nav Controller   |
         +------------+-------------+
                  <ion-nav>
                      |
                      |
    Page 3  +--------------------+                     LoginPage
  Page 2  +--------------------+ |
Page 1  +--------------------+ | |              +--------------------+
        | | Header           |<-----------------|       Login        |
        +--------------------+ | |              +--------------------+
        | | |                | | |              | Username:          |
        | | |                | | |              | Password:          |
        | | |  Page 3 is     | | |              |                    |
        | | |  only content  | | |              |                    |
        | | |                |<-----------------|                    |
        | | |                | | |              |                    |
        | | |                | | |              |                    |
        | +------------------|-+ |              |                    |
        | | Footer           |-|-+              |                    |
        | +------------------|-+                |                    |
        +--------------------+                  +--------------------+

  +--------------------+    +--------------------+    +--------------------+
  | Header             |    | Content            |    | Content            |
  +--------------------+    |                    |    |                    |
  | Content            |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    +--------------------+    |                    |
  |                    |    | Footer             |    |                    |
  +--------------------+    +--------------------+    +--------------------+

    输入属性

    • root Page

      当前打开的页面。

    • swipeBackEnabled boolean

      是否开启滑动返回

    输入属性

    • hideBackButton boolean

      是否隐藏回退键。

    注入NavController

    1
    2
    3
    4
    5
    class MyComponent {
    constructor(nav: NavController) {
    this.nav = nav;
    }
    }

    页面展示

    页面创建可以使用@Page装饰器。

    当页面被添加到navigation栈的时候，页面就被展示了，使用push()方法。

    页面销毁时将从navigation栈中移除（使用pop()或者setRoot()）。

    生命周期

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @Page({
    template: 'Hello World'
    })
    class HelloWorld {
    onPageLoaded() {
    console.log("I'm alive!");
    }
    onPageWillLeave() {
    console.log("Looks like I'm about to leave :(");
    }
    }

    • onPageLoaded

      当页面加载时运行，每被创建并且添加到DOM树时执行一次。如果页面切换但是被缓存下来，再次进入此页面时，将不会触发该事件。

    • onPageWillEnter

      当页面即将进入并成为活动页时触发

    • onPageDidEnter

      当页面完全进入成为活动页面时执行，不管是否被缓存，都将执行。

    • onPageWillLeave

      页面即将成为非活动页时触发

    • onPageDidLeave

      当页面切换，该页面已经成为非活动页时触发

    • onPageWillUnload

      当页面即将被销毁时执行

    • onPageDidUnload

      当页面已经被销毁时执行

    实例方法

    setRoot(page,params,opts)

    设置当前navigation栈的根节点

    属性名称类型描述
    page Type 页面的类型
    params object 传递到下一个视图的参数
    opts object 过渡选项

    返回：Promise

    setPages(pages,opts)

    用来设置navigation栈。你可以用它改变navigation的历史记录和切换动画。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    import {Page, NavController} from 'ionic-angular';
    import {Info} from '../info/info';
    import {List} from '../list/list';
    import {Detail} from '../detail/detail';
     
    export class Home {
    constructor(nav: NavController) {
    this.nav = nav;
    }
    setPages() {
    this.nav.setPages([{
    page: Info
    }, {
    page: List,
    params: {tags: 'css'}
    }, {
    page: Detail,
    params: {id: 325}
    }], {
    animate: true
    });
    }
    }
    属性名称类型描述
    pages array 页面类型和参数组成的数组
    opts object 过渡选项

    返回：Promise

    push(page,params,opts)

    属性名称类型描述
    page Type 页面的类型
    params object 传递到下一个视图的参数
    opts object 过渡选项

    返回：Promise

    present(enteringView,opts)

    添加组件到navigation栈中，例如：ActionSheet Alert Modal等

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    class MyClass{
    constructor(nav: NavController) {
    this.nav = nav;
    }
     
    presentModal() {
    let modal = Modal.create(ProfilePage);
    this.nav.present(modal);
    }
    }
    属性名称类型描述
    enteringView ViewController 组件的控制器
    opts object 过渡选项

    返回：Promise

    insert(insertIndex,page,params,opts)

    插入一个视图到navigation栈。

    属性名称类型描述
    insertIndex number 插入的索引
    page Type 页面的类型
    params object 传递到下一个视图的参数
    opts object 过渡选项

    返回：Promise

    insertPages(insertIndex,insertPages,opts)

    属性名称类型描述
    insertIndex number 插入的索引
    insertPages array 页面类型和参数组成的数组
    opts object 过渡选项

    返回：Promise

    pop(opts)

    如果你想后退，那么可以调用该方法。

    1
    2
    3
    4
    5
    6
    7
    8
    class SecondView{
    constructor(nav:NavController){
    this.nav = nav;
    }
    goBack(){
    this.nav.pop();
    }
    }
    属性名称类型描述
    opts object 过渡选项

    popToRoot(opts)

    直接跳转到根导航，不管在navigite栈中有多少视图。

    属性名称类型描述
    opts object 过渡选项

    popTo(view,opts)

    将当前视图到该视图的历史记录弹出，并跳转到指定视图。

    属性名称类型描述
    view ViewController
    opts object 过渡选项

    remove(startIndex,removeCount,opts)

    删除栈里指定索引段的元素。

    属性名称类型描述
    startIndex number 从栈中删除页面的起始索引，默认为最后一页的索引
    removeCount number 从栈中删除多少个页面，默认为1
    opts object 过渡选项

    返回一个Promise

    canSwipeBack()

    返回一个布尔值，来表示当前是否支持滑动返回

    canGoBack()

    返回一个布尔值，来表示是否还有可返回的页面

    getByIndex(index)

    返回指定索引的组件

    getActive()

    返回当前活动页面的视图控制器

    isActive(view)

    返回一个布尔值，来表示该视图是否是当前活动页面。

    getPrevious(view)

    返回指定页面的视图控制器

    first()

    返回当前栈中第一个的视图控制器

    last()

    返回当前栈中最后一个的视图控制器

    indexOf(view)

    返回某个视图在栈中的索引

    length()

    返回栈的长度。

    rootNav()

    返回NavController

    类似于在Ionic V1版本中的$stateParams用来在页面中传递数据。

    1
    2
    3
    4
    5
    6
    7
    export class MyClass{
    constructor(params: NavParams){
    this.params = params;
    // userParams is an object we have in our nav-parameters
    this.params.get('userParams');
    }
    }

    实例方法

    data()

    get(parameter)

    • parameter string

      是数据中键值对中的键名。

    返回上一页的指令

    1
    2
    3
    <ion-content>
    <div block button nav-pop>go back</div>
    </ion-content>

    跳转到一个新的页面。

    1
    <button [navPush]="pushPage" [navParams]="params"></button>

    Option

    ion-option是ion-select的子组件。

    输入

    • checked boolean

      是否被选中

    • value any

      该选项的值

    Page

    @Page装饰器包含IONIC_DIRECTIVE中所有的组件和指令以及Angular中的CORS_DIRECTIVES和 FORM_DIRECTIVES。所以你只需要将你自定义的指令和组件依赖进去就好。

    使用方法

    1
    2
    3
    4
    5
    6
    7
    8
    @Page({
    template: `
    <ion-content>
    I am a page!
    </ion-content>
    `
    })
    class MyPage {}

    此时@Page已经帮你把那些指令注入进去了，所以你无需再次增加directives数组。

    如果你需要自定义一个组件，而且需要依赖某个指令时，你需要手动加入。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import {IONIC_DIRECTIVES} from 'ionic-angular';
    @Component({
    selector: 'my-component'
    template: `<div class="my-style">
    <ion-checkbox></ion-checkbox>
    </div>`,
    directives: [IONIC_DIRECTIVES]
    })
    class MyCustomCheckbox {}

    或者你可以指定明确的指令来获取，并单独添加它。

    1
    2
    3
    4
    5
    import {Checkbox, Icon} from 'ionic-angular'
    @Component({
    ...
    directives: [Checkbox, Icon]
    })

    然而，使用IONIC_DIRECTIVES不会产生额外的性能开销，所以，又有什么理由不用它呢。

    Platform

    用来返回当前平台信息。它比ionic V1版本复杂，并不是单纯的返回一个平台信息，还有更多的信息，例如：设备系统，手机还是平板，移动app还是浏览器。

    实例方法

    is(platformName)

    返回一个布尔值来表示当前平台是否是platformName。

    注意：同一个环境下，当platformName不同时，可能不止有一个返回true。例如，Ipad可能返回true的platformName有：mobile ios ipad tablet等。

    可能有的平台名有：

    • android
    • cordova
    • core
    • ios
    • ipad
    • iphone
    • mobile
    • mobileweb
    • phablet
    • tablet
    • windows
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import {Platform} from 'ionic-angular';
     
    @Page({...})
    export MyPage {
    constructor(platform: Platform) {
    if (platform.is('ios')) {
    // what ever you need to do
    // if the platform is ios
    }
    }
    }

    platforms()

    返回一个平台数组。

    同一个环境下，可能会返回多个平台信息。

    versions(platformName)

    返回一个包含系统相关信息的对象。

    ready()

    返回一个Promise来表示设备是否准备好开始运行程序了。

    setDir(dir)

    设置文字的排列方向。

    • dir string

      ltr代表从左到右的排列
      rtl代表从右到左的排列

    dir()

    返回文字排列方向。

    isRTL()

    返回一个布尔值，来表示当前文本是否是从右到左排列的。

    setLang(language)

    设置语言。

    • language string

      en-US en-GB ar de zh es-MX等。

    lang()

    返回当前语言

    RadioButton

    单选按钮必须包含在<ion-list radio-group>中，并且至少有两个。

    使用方法

    1
    2
    3
    4
    <ion-item>
    <ion-label>Radio Label</ion-label>
    <ion-radio value="radio-value"></ion-radio>
    </ion-item>

    输出事件

    • select

      选择的时候执行的事件。

    RadioGroup

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <ion-list radio-group [(ngModel)]="autoManufacturers">
     
    <ion-list-header>
    Auto Manufacturers
    </ion-list-header>
     
    <ion-item>
    <ion-label>Cord</ion-label>
    <ion-radio value="cord"></ion-radio>
    </ion-item>
     
    <ion-item>
    <ion-label>Duesenberg</ion-label>
    <ion-radio value="duesenberg"></ion-radio>
    </ion-item>
     
    <ion-item>
    <ion-label>Hudson</ion-label>
    <ion-radio value="hudson"></ion-radio>
    </ion-item>
     
    <ion-item>
    <ion-label>Packard</ion-label>
    <ion-radio value="packard"></ion-radio>
    </ion-item>
     
    <ion-item>
    <ion-label>Studebaker</ion-label>
    <ion-radio value="studebaker"></ion-radio>
    </ion-item>
     
    </ion-list>

    输出事件

    • change

      在选择改变时执行的事件。

    Refresher

    用来实现下拉刷新功能。

    使用方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ion-content>
     
    <ion-refresher (refresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
     
    <!-- 其他代码 -->
     
    </ion-content>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @Page({...})
    export class NewsFeedPage {
     
    doRefresh(refresher) {
    console.log('Begin async operation', refresher);
     
    setTimeout(() => {
    console.log('Async operation has ended');
    refresher.complete();
    }, 2000);
    }
     
    }

    Refresher Content

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <ion-content>
     
    <ion-refresher (refresh)="doRefresh($event)">
    <ion-refresher-content
    pullingIcon="arrow-dropdown"
    pullingText="Pull to refresh"
    refreshingSpinner="circles"
    refreshingText="Refreshing...">
    </ion-refresher-content>
    </ion-refresher>
     
    </ion-content>

    实例方法

    state

    获取当前的刷新状态。状态有：

    • inactive

      没有下拉，被隐藏状态

    • pulling

      用户正在下拉，但还没松手。

    • cancelling

      用户下拉放手后，没有达到触发刷新的距离的状态。

    • ready

      用户下拉的足够远，如果放手就开始更新。

    • refreshing

      正在刷新，等待异步操作结束。

    • completing

      刷新成功的状态。

    startY

    返回用户开始下拉的Y坐标

    currentY

    返回当前触摸或鼠标事件的Y坐标。

    deltaY

    返回开始下拉的Y坐标距离当前触摸或鼠标事件的Y坐标的差值。

    progress

    0代表还没有到达某个距离，不触发刷新，1代表已经到达某个距离，松手触发刷新。

    complete()

    当你异步操作完成后，调用这个函数来关闭刷新动画，同时改变了状态。

    cancel()

    将状态从refreshing改变成cancelling

    输入

    属性名称类型描述
    pullMin number 用户最小的下拉距离，默认为60
    pullMax number 用户下拉的最大距离，超过该距离后，自动进入刷新。默认最大距离为：pullmin+60。
    closeDuration number 多少毫秒它需要关闭组件，默认为280
    snapbackDuration number 默认280
    enabled boolean 是否启用该组件

    输出事件

    • refresh

      刷新事件。不要忘记在异步事件执行完成后调用complete()

    • pulling

      当用户下拉的时候调用。

    • start

      当用户开始下拉的时候调用。

    Scroll

    1
    2
    3
    4
    5
    6
    7
    8
    <ion-scroll scrollX="true">
    </ion-scroll>
     
    <ion-scroll scrollY="true">
    </ion-scroll>
     
    <ion-scroll scrollX="true" scrollY="true">
    </ion-scroll>

    属性

    属性名称类型描述
    scrollX boolean 是否启用x轴滚动
    scrollY boolean 是否启用Y轴滚动
    zoom boolean 是否启动缩放
    maxZoom number 设置缩放的最大级别

    管理一个搜索栏，可以搜索或筛选项目的显示。

    使用方法

    1
    2
    3
    4
    5
    6
    <ion-searchbar
    [(ngModel)]="myInput"
    [hideCancelButton]="shouldHideCancel"
    (input)="onInput($event)"
    (cancel)="onCancel($event)">
    </ion-searchbar>

    输入属性

    属性名称类型描述
    cancelButtonText string 设置取消按钮的文本值
    hideCancelButton boolean 是否隐藏取消按钮
    debounce number 每次键入字符等待触发事件的时间有多长，默认为250毫秒
    placeholder string 占位提示符
    ngModel any 搜索栏值的双向绑定

    输出事件

    • input

      当Searchbar中值变化的时候触发

    • blur

      当Searchbar失去焦点的时候触发

    • focus

      当Searchbar得到焦点的时候触发

    • cancel

      当取消按钮被点击的时候触发

    • clear

      当清空按钮被点击的时候触发

    Segment

    Segment是一组按钮，允许用户和一组按钮进行交互，类似于标签页的功能。

    使用方法

    1
    2
    3
    4
    5
    6
    7
    8
    <ion-segment [(ngModel)]="relationship" (change)="onSegmentChanged($event)" danger>
    <ion-segment-button value="friends">
    Friends
    </ion-segment-button>
    <ion-segment-button value="enemies">
    Enemies
    </ion-segment-button>
    </ion-segment>

    输出事件

    • change

      当按钮改变时触发事件。

    Select

    ion-select和html中的select有点相似。

    单选

    1
    2
    3
    4
    5
    6
    7
    <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select [(ngModel)]="gender">
    <ion-option value="f" checked="true">Female</ion-option>
    <ion-option value="m">Male</ion-option>
    </ion-select>
    </ion-item>

    多选

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ion-item>
    <ion-label>Toppings</ion-label>
    <ion-select [(ngModel)]="toppings" multiple="true">
    <ion-option>Bacon</ion-option>
    <ion-option>Black Olives</ion-option>
    <ion-option>Extra Cheese</ion-option>
    <ion-option>Mushrooms</ion-option>
    <ion-option>Pepperoni</ion-option>
    <ion-option>Sausage</ion-option>
    </ion-select>
    <ion-item>

    Alert按钮

    默认为Cancel和OK

    1
    2
    3
    <ion-select okText="Okay" cancelText="Dismiss">
    ...
    </ion-select>

    Alert选项

    使用alertOptions可以覆盖Alert的配置。例如可以更改标题。

    1
    2
    3
    4
    5
    6
    7
    8
    <ion-select [alertOptions]="alertOptions">
    ...
    </ion-select>
     
    this.alertOptions = {
    title: 'Pizza Toppings',
    subTitle: 'Select your toppings'
    };

    输入

    • multiple boolean

      是否可以接受多个选项

    • disabled boolean

      组件是否被禁用

    输出事件

    • change

      当选项改变时触发

    • cancel

      取消时触发

    ShowWhen

    用来表示某平台或者某屏幕方向时时显示该元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div showWhen="android">
    I am visible on Android!
    </div>
     
    <div showWhen="ios">
    I am visible on iOS!
    </div>
     
    <div showWhen="android,ios">
    I am visible on Android and iOS!
    </div>
     
    <div showWhen="portrait">
    I am visible on Portrait!
    </div>
     
    <div showWhen="landscape">
    I am visible on Landscape!
    </div>

    Slides

    Slides是基于Swiper.js实现的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    @Page({
    template: `
    <ion-slides pager (change)="onSlideChanged($event)" (move)="onSlideMove($event)">
    <ion-slide>
    <h3>Thank you for choosing the Awesome App!</h3>
    <p>
    The number one app for everything awesome.
    </p>
    </ion-slide>
    <ion-slide>
    <h3>Using Awesome</h3>
    <div id="list">
    <h5>Just three steps:</h5>
    <ol>
    <li>Be awesome</li>
    <li>Stay awesome</li>
    <li>There is no step 3</li>
    </ol>
    </div>
    </ion-slide>
    <ion-slide>
    <h3>Any questions?</h3>
    </ion-slide>
    </ion-slides>
    `
    })

    输入

    属性名称类型描述
    pager boolean 是否显示索引点
    options any 任何Slider需要配置的参数，可以参考http://www.idangero.us/swiper/api/
    zoom number 该组件是否可以缩放
    zoomDuration number 缩放该组件需要多长时间
    zoomMax number 最大的缩放

    输出事件

    • change

      当滑块变化的时候触发

    • slideChangeStart

      当滑块开始更改时触发

    • move

      当滑块移动时触发

    SqlStorage

    SqlStorage采用SQLite查询。在文件系统中持久的储存数据，这是首选的储存引擎。引擎支持简单的键值对存储和完整的Sql查询。

    1
    2
    3
    4
    5
    6
    7
    8
    let storage = new Storage(SqlStorage, options);
    storage.set('name', 'Max');
    storage.get('name').then((name) => {
    });
     
    // Sql storage also exposes the full engine underneath
    storage.query('insert into projects(name, data) values("Cool Project", "blah")');
    storage.query('select * from projects').then((resp) => {})

    静态方法

    BACKUP_LOCAL()

    BACKUP_LIBRARY()

    BACKUP_DOCUMENTS()

    实例方法

    query(query,params)

    在数据库中执行SQL操作。

    • query string

      sql字符串

    • params array

    返回一个Promise

    get(key)

    从数据库中获取给定的键名所对应的键值。

    返回一个Promise

    set(key,value)

    从数据库中插入键值对

    返回一个Promise

    remove(key)

    从数据库中删除键值对。

    返回一个Promise

    clear()

    清空数据库

    Tab

    底部的标签按钮

    使用方法

    一般ion-tab都有一个[root]值来加载该组件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <ion-tabs>
    <ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"><ion-tab>
    </ion-tabs>
     
     
     
    import {Chat} from '../chat/chat';
    export class Tabs {
    constructor(){
    // here we'll set the property of chatRoot to
    // the imported class of Chat
    this.chatRoot = Chat
    }
    }

    输入

    属性名称类型描述
    root Page 设置根页面
    rootParams object 传递数据到该页面
    tabTitle string 页面标题
    tabIcon string 页面图标
    tabBadge string 设置徽章
    tabBadgeStyle string 设置徽章颜色

    输出事件

    • select

      选中时触发。

    Tabs

    实例方法

    select(index)

    选中某个索引的选项卡

    getByIndex(index)

    返回一个和索引匹配的选项卡

    getSelected()

    返回当前选中的选项卡

    输入

    属性名称类型描述
    selectedIndex number 第一次加载时默认选中的选项卡，如果不提供那么默认是0
    preloadTabs boobean 是否预加载所有标签
    tabbarIcons string 这个属性是过时的，请使用TabBarLayout代替，设置图标的位置top bottom left right hide
    tabbarLayout string 设置tabbar的布局 icon-top icon-lefticon-right icon-bottom icon-hidetitle-hide
    tabbarPlacement string 设置tabbar的位置：top bottom

    输出事件

    • change

      当标签页改变时触发

    TextArea

    1
    2
    3
    4
    <ion-item>
    <ion-label stacked>Message</ion-label>
    <ion-textarea [(ngModel)]="msg"></ion-textarea>
    </ion-item>

    Toggle

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <ion-list>
     
    <ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
    </ion-item>
     
    <ion-item>
    <ion-label>Sausage</ion-label>
    <ion-toggle [(ngModel)]="sausage" disabled="true"></ion-toggle>
    </ion-item>
     
    <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-toggle [(ngModel)]="mushrooms"></ion-toggle>
    </ion-item>
     
    </ion-list>

    属性

    • checked boolean

      是否打开

    • disabled boolean

      是否禁用

    输入

    • checked
    • disabled

    输出事件

    • change

      切换时触发

    Toolbar

    Toolbar是一条在上面或者在下面的通用栏。

    使用方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <ion-toolbar>
    <ion-title>My Toolbar Title</ion-title>
    </ion-toolbar>
     
    <ion-toolbar>
    <ion-title>I'm a subheader</ion-title>
    </ion-toolbar>
     
    <ion-content></ion-content>
     
    <ion-toolbar position="bottom">
    <ion-title>I'm a subfooter</ion-title>
    </ion-toolbar>
     
    <ion-toolbar position="bottom">
    <ion-title>I'm a footer</ion-title>
    </ion-toolbar>

    属性

    • position any

      设置toolbar的位置，默认是top

    ViewController

    访问当前视图的功能和信息

    使用方法

    1
    2
    3
    4
    5
    6
    7
    import {Page, ViewController} from 'ionic-angular';
    @Page....
    export class MyPage{
    constructor(viewCtrl: ViewController){
    this.viewCtrl = viewCtrl;
    }
    }

    实例方法

    • componentType()

    • subscribe()

    • onDismiss()

    • dismiss()

    • enableBack(Check)
      检查navigation栈中是否可以返回

    • index()
      查询在当前视图navigation栈中的索引

    • isFirst()
      返回一个布尔值，来表示是否是栈中第一个视图

    • isLast()

    • hasNavbar()
      返回一个布尔值，来表示是否拥有navBar

    • setBackButtonText(backButtonText)
      更改后退按钮的文本

    • showBackButton(Set)

    设置当前视图的后退按钮是否可见

     
     
  • 相关阅读:
    仓位管理 – 1.理论篇
    作为首席架构师，我是如何选择并落地架构方案的？
    asp.net MVC 应用程序的生命周期
    微服务架构优缺点
    一位同事对 Rafy 框架的一些建议及我的回复
    .NET 版本区别，以及与 Windows 的关系
    MIS性能优化常见问题与方案（辅助项目组性能优化的总结贴）
    何时使用静态 API
    2011奥斯卡最佳纪录片《监守自盗(Inside Job)》小结
    Rafy 框架
  • 原文地址：https://www.cnblogs.com/itfantasy/p/6687047.html
Copyright © 2011-2022 走看看