ionic 2/3 相关变化总结

从ionic 2——ionic3 对比变化分析。

安装   

```

2.0以上的安装    npm install -g ionic@beta     

1.0安装    npm install -g ionic

```

初始化项目

```

ionic start ionicdemo --v2

ionic start ionicdedmo tabs --type=ionic1

```

生命周期对比

```

ionic2 声明周期                        ionic 3声明周期

onPageLoaded()                      ionViewDidLoad()页面加载完成 

onPageWillEnter()                  ionViewWillEnter()  将要进入

onPageDidEnter()                  ionViewDidEnter() 

onPageWillLeave()                ionViewWillLeave()  将要离开

onPageDidLeave()                ionViewDidLeave()

等....

```

ionic2/3 tab用法

```

html

<ion-tabs id="mainTabs" selectedIndex="2">

    <ion-tab [root]="tab1Root" tabTitle="" tabIcon="" tabBadge="2"  tabBadgeStyle="danger" >

    selectedIndex  选中哪个tab      tabBadge  提示      tabBadgeStyle 提示样式

js  指定选中哪一个tab

ionic2 中使用                                                        ionic3中使用

static get Parameters(){                                      import {Tabs} from "ionic-angular"

  return [[ionicApp]]                                            import {ViewChild} from "@angular/core"

}                                                                          再export中使用

constractor(app){                                                @ViewChild("mainTabs") tabRef : Tabs

  this.app = app                                                  ionViewDidEnter(){

}                                                                                this.tabRef.select(2)

onPageDidEnter(){                                              }

  let tabs = this.app.getComparent('mainTabs')

  tabs.select(2)

}

```

ionic 2/3button用法

```

ionic2 button

<button  danger(颜色)  Round(圆角) outline(没有背景只有边框)  clear(只有文字)  block(块状)  small    large></button>

ionic3 button

<button  ion-button  color="danger(颜色)"  Round(圆角) outline(没有背景只有边框)  clear(只有文字)  block(块状)  small    large></button>

ionic2/3 button 内部添加图表

<button><ion-icon name="home"></ion-icon></button>

```

ionic2/3 input 组件

```

<ion-label floating--输入文字浮到上方  stacked------一直在上方  >

    <ion-input type="text" value=" " placeholder="提示" [(ngModel)]="双向绑定" （click）="点击事件()"></ion-input>

</ion-label>

```

ionic2/3 Loading Alert  Modal  Toast  用法一致

create中可以是一个页面

```

ionic2 中                                                                                   

import {Loading,NavController} from "ionic-angular"               

static get parameters(){                                                                                                                     

    return [[NavController]]

}

constroctor(){

    this.nav = nav

}

onPageDidLoad(){

  let loading = Loading.create({'jiazao'})

  this.nav.present(loading)  出现

  loading.dismiss()  隐藏

}

ionic3 用法

import {LoadingController}  from "ionic-angular"           

constroctor(public loadingCtrl:LoadingController){

}

ionViewDidEnter(){

    let loading = this.loadingCtrl.create({''})

    loading.present()

    loading.dismiss()

}

```

ionic2/3 Grid 组件

```

ionic2  用法

<ion-row><ion-col width-50  offset-10></ion-col></ion-row>

ionic3用法

<ion-grid><ion-row><ion-col col-12></ion-col></ion-row></ion-grid>

```

ionic 2/3 toolbar 组件

```

ionic2用法

<ion-toolbar>

    <ion-title>

        <ion-buttons start/end 按钮再左边>

            <button icon-start------图片在左边>

                <span ion-text color="primary" showWhen="ios">取消</span>

                <ion-icon name="md-close" showWhen="android">

            </button>

        </ion-buttons>

      </ion-title>

  </ion-toolbar>

ionic3 用法

<ion-header noborder>

    <ion-toolbar>

      <ion-title>

        <ion-buttons start/end 按钮再左边>

            <button ion-button icon-start------图片在左边>

                <span ion-text color="primary" showWhen="ios">取消</span>

                <ion-icon name="md-close" showWhen="android">

            </button>

        </ion-buttons>

      </ion-title>

  </ion-toolbar>

</ion-header>

```

ionic 2/3  list组件

```

<ion-list>

  <ion-list-header></ion-list-header>    标题

  <ion-item>

      <ion-icon item-start/item-end>    图标居中居右

      <ion-avatar><img><ion-avatar>    头像

      <h2></h2>

      <p></p>

      <ion-item-divider></ion-item-divider>    item阴影

  </ion-item>

  <ion-item-options slide="left"  >        item左滑

</ion-list>

```

ionic2/3 card组件

```

<ion-card>

  <ion-card-header><ion-card-header>

  <ion-card-content><ion-card-content>

</ion-card>

```