ionic 2 3 生命周期 tab input button list grid input card loading toolbar 随点记上篇

从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 声明周期                        
onPageLoaded()                     
onPageWillEnter()                  
onPageDidEnter()                   
onPageWillLeave()                
onPageDidLeave()                
等....
ionic 3声明周期
 ionViewDidLoad()页面加载完成  
 ionViewWillEnter()   将要进入 
 ionViewDidEnter()   
 ionViewWillLeave()  将要离开
 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 中使用                                                     
static get Parameters(){                                      
   return [[ionicApp]]                                           
}                                                                           
constractor(app){                                                 
   this.app = app                                                  
}                                                                               
onPageDidEnter(){                                              
   let tabs = this.app.getComparent('mainTabs')
   tabs.select(2)
}

ionic3中使用
 import {Tabs} from "ionic-angular"
 import {ViewChild} from "@angular/core"
 再export中使用
@ViewChild("mainTabs") tabRef : Tabs
 ionViewDidEnter(){
    this.tabRef.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-title>
       <ion-buttons start/end 按钮再左边>
            <button icon-start------图片在左边>
                 <span ion-text color="primary" showWhen="ios">取消</span>
                 <ion-icon name="md-close" showWhen="android"> </ion-icon>
            </button>
         </ion-buttons>
  </ion-toolbar>

ionic3 用法
<ion-header noborder>
     <ion-toolbar>
      <ion-title>
      </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"> </ion-icon> 
            </button>
         </ion-buttons>
  </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>
1 item侧滑
<ion-list>
    <ion-item-sliding>
    <ion-item>
      <ion-label>
        <h3>Grapes</h3>
      </ion-label>
    </ion-item>
    <ion-item-options>
      <button ion-button color="secondary">删除 </button>
      <button ion-button >增加 </button>
    </ion-item-options>
  </ion-item-sliding>
  </ion-list>
2 图标居左 
<ion-item>
    <ion-icon item-start name="apps"></ion-icon>    
    <h2>标题</h2>
    <p>字段信息</p>       
</ion-item>
<ion-item>
  <ion-avatar slot="start">
    <img src="/assets/imgs/logo.png">
  </ion-avatar>
  <ion-label>Item Avatar</ion-label>
</ion-item>
3 有阴影的item
<ion-item-divider>
 <ion-label>
    Basic Item Divider
  </ion-label>
</ion-item-divider> 

ionic2/3 card组件

<ion-card>
   <ion-card-header><ion-card-header>
   <ion-card-content><ion-card-content>
</ion-card>