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