Ionic2 可以左右滑动的Segment

ionic2为我们提供了一个非常好的组件叫segment，一般的使用是没有问题的但是我们如果想要给segment加上一个可以滑动的事件的时候就会遇到一些问题，以下就是个人见解。
在ionic2中使用swipe的时候，没有像1中那样提供左滑还是右滑，而是使用的$event事件。这样就为我们处理左滑还是右滑带来麻烦，但是如果我们使用过HammerJS 的话我们就知道HammerJS 中处理事件是通过event的direction来判断是哪个方向。其对应关系如下：

Name	Value
DIRECTION_NONE	1
DIRECTION_LEFT	2
DIRECTION_RIGHT	4
DIRECTION_UP	8
DIRECTION_DOWN	16
DIRECTION_HORIZONTAL	6
DIRECTION_VERTICAL	24
DIRECTION_ALL	30

有了这个对应关系我们就可以通过这个来进行左右滑动的判断了，以下是详细代码：

<ion-header>
  <ion-navbar no-border-bottom>
    <ion-title>
      Segments
    </ion-title>
  </ion-navbar>

  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="segmentModel">
      <ion-segment-button value="segmentOne">
        segmentOne
      </ion-segment-button>
      <ion-segment-button value="segmentTwo">
        segmentTwo
      </ion-segment-button>
      <ion-segment-button value="segmentThree">
        segmentThree
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content (swipe)="swipeEvent($event)">
  <div [ngSwitch]="segmentModel">
    <ion-list *ngSwitchCase="'segmentOne'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/icon/favicon.ico">
        </ion-thumbnail>
        <h2>segmentOne</h2>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'segmentTwo'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/icon/favicon.ico">
        </ion-thumbnail>
        <h2>segmentTwo</h2>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'segmentThree'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/icon/favicon.ico">
        </ion-thumbnail>
        <h2>segmentThree</h2>
      </ion-item>
    </ion-list>
  </div>
</ion-content>

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  segmentsArray = ['segmentOne','segmentTwo','segmentThree'];
  segmentModel: string = this.segmentsArray[0];
  constructor(public navCtrl: NavController) {
  }

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];
  }
}
}
}

在ionic升级后因为考虑到ion-content涉及到滚动，官方不建议在ion-content上面使用手势事件。
所以我们需要在子节点上使用手势事件。例如：

<ion-content>
 <div (swipe)="swipeEvnet($event)">
</div>
</ion-content>

如果实在要在ion-content节点使用可以借助第三方手势事件js来操作，比如HammerJs。