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

   

    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

ionic3 button

ionic2/3 button 内部添加图表

```

ionic2/3 input 组件

```

   

```

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  用法

ionic3用法

```

ionic 2/3 toolbar 组件

```

ionic2用法

   

       

           

                取消

               

           

       

     

 

ionic3 用法

   

     

       

           

                取消

               

           

       

     

 

```

ionic 2/3  list组件

```

      标题

 

          图标居中居右

          头像

     

     

          item阴影

 

          item左滑

```

ionic2/3 card组件

```

 

 

```