1. 创建page页面方法：ionic g page 页面名字

2. 设定全局颜色，color颜色方法

   
   image.png

3. 添加页面后找到“app.module.ts文件”。再这个文件夹添加引用路径，引用

   
   image.png

4. Tabs导航页面 <ion-tabs selectedIndex="4" class="tab-btn">设定selectedIndex="4"会显示当前app的下标页，从0开始。

5. Model弹出层方法 定义(ionSelect)="call()"事件 。<ion-tab (ionSelect)="call()"></ion-tab>

      定义页面：
      import { ModalPage } from '../modal/modal';

      事件写法：

      call(){
          let profileModal = this.modalCtrl.create(ModalPage);
          profileModal.onDidDismiss(data => {
               console.log(data);
           });
         profileModal.present();
      }

6． ion-segment-button显示第一个tab，和滑动tab页面方法 ，定义好*ngSwitchCase 方法。加上滑动事件(swipe)="swipeEvent($event)"

    <div [ngSwitch]="segmentModel" style="background: #ededed;"   (swipe)="swipeEvent($event)">

    <ion-card  *ngSwitchCase="'segmentOne'" (click)="itemSelected()" style="margin: 0;width: 100%;">

在ts文件定义好数组：

      segmentsArray = ['segmentOne','segmentTwo','segmentThree'];

显示当前tab页面方法：

       segmentModel: string = this.segmentsArray[0];如果显示2个那么下标就为1

滑动js：

        swipeEvent(event){

//向左滑

        if(event.direction==2){
              if(this.segmentsArray.indexOf(this.segmentModel)<2){
                      this.segmentModel = this.segmentsArray[this.segmentsArray.indexOf(this.segmentModel)+1];
               }
        }

//向右滑

        if(event.direction==4){、
                if(this.segmentsArray.indexOf(this.segmentModel)>0){
                    this.segmentModel = this.segmentsArray[this.segmentsArray.indexOf(this.segmentModel)-1];
                }
        }

7。 跳转页面后，header部分会自动生成“<back”返回按钮。隐藏并返回办法

    <ion-navbar  color="bgc"  hideBackButton> 在ion-navbar标签加上hideBackButton

如果添加返回功能需要添加点击事件然后：

    this.navCtrl.pop();

8. 弹出层基本配置

image.png

ts文件引用：

  import { Platform, ActionSheetController } from 'ionic-angular';

控制器注册：

    constructor(public platform: Platform,public navCtrl: NavController, public navParams: NavParams,

    public actionsheetCtrl: ActionSheetController) {}

最后：

openMenu() {
      let actionSheet = this.actionsheetCtrl.create({
      title: '性别选择',
      buttons: [
      {
              text: '取消',
              role: 'cancel',
              handler: () => {
                    console.log('Cancel clicked');
              }
    }]
});
actionSheet.present();
}

图标添加

[ionic2]自带图标库地址：http://ionicframework.com/docs/v2/ionicons/。由于项目需要，自带图标库可能无法满足需求，此时就需要加载第三方图标库。

这里推荐阿里巴巴矢量图标库：http://www.iconfont.cn/。

1. 搜索想要使用的图标，并添加入库

2. 点击右上角的购物车图标，查看添加的图标

image.png

3. 添加至项目，此时需要登录，项目名称随意

4. 下载

5. 在Ionic2中使用 在Ionic2项目结构解析中，我们知道可以把一些全局样式添加在 src/app/app.scss 中，资源文件可以放在 src/assets。 在 assets 下新建文件夹 myFont，打开下载好的图库文件，将iconfont.woff、iconfont.ttf、iconfont.svg、iconfont.eot添加到文件夹 myFont。 打开图库文件中的iconfont.css，将代码添加到 src/app/app.scss 并修改路径

    @font-face {      font-family: "Ionicons";     
           src: url('../assets/myFont/iconfont.eot?t=1481782193096'); /* IE9*/      
           src: url('../assets/myFont/iconfont.eot?t=1481782193096#iefix') format('embedded-opentype'), /* IE6-IE8 */      
           url('../assets/myFont/iconfont.woff?t=1481782193096') format('woff'), /* chrome, firefox*/  
           url('../assets/myFont/iconfont.ttf?t=1481782193096') format('truetype'), /* chrome,firefox, opera, Safari, Android, iOS 4.2+*/      
           url('../assets/myFont/iconfont.svg?t=1481782193096#iconfont') format('svg'); /* iOS 4.1- */  
      }    
      .icon {      
                display: inline-block;      
                font-family: "Ionicons";      
                speak: none;      
                font-style: normal;     
                font-weight: normal;      
                font-variant: normal;      
                text-transform: none;      
                text-rendering: auto;      
                line-height: 1;      
                -webkit-font-smoothing: antialiased;      
                -moz-osx-font-smoothing: grayscale;  
        }    
      .ion-md-weixin:before,  .ion-ios-weixin:before,  .ion-ios-weixin-outline:before {      content: "\e603";  }

Note：
1. 修改font-family为Ionicons（为了不影响原来图标的使用）
2. 定义ios时要多定义一个outline 此时在页面中使用一下代码，即可显示微信图标

<ion-icon name="weixin"></ion-icon>