ionic2為我們提供了一個非常好的組件叫segment，一般的使用是沒有問題的但是我們?nèi)绻胍osegment加上一個可以滑動的事件的時候就會遇到一些問題漾月，以下就是個人見解镜硕。
在ionic2中使用swipe的時候，沒有像1中那樣提供左滑還是右滑狸捅，而是使用的$event事件激涤。這樣就為我們處理左滑還是右滑帶來麻煩拟糕，但是如果我們使用過HammerJS 的話我們就知道HammerJS 中處理事件是通過event的direction來判斷是哪個方向。其對應(yīng)關(guān)系如下：

有了這個對應(yīng)關(guān)系我們就可以通過這個來進(jìn)行左右滑動的判斷了倦踢，以下是詳細(xì)代碼：

<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>
          ![](assets/icon/favicon.ico)
        </ion-thumbnail>
        <h2>segmentOne</h2>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'segmentTwo'">
      <ion-item>
        <ion-thumbnail item-left>
          ![](assets/icon/favicon.ico)
        </ion-thumbnail>
        <h2>segmentTwo</h2>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'segmentThree'">
      <ion-item>
        <ion-thumbnail item-left>
          ![](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上面使用手勢事件。
所以我們需要在子節(jié)點上使用手勢事件硼一。例如：

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

如果實在要在ion-content節(jié)點使用可以借助第三方手勢事件js來操作累澡，比如HammerJs。