从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>
```
