Ionic 2が左右にスライドできるSegment

ionic 2はsegmentという非常に良いコンポーネントを提供してくれています.一般的な使用は問題ありませんが、segmentにスライド可能なイベントを追加したい場合は、以下が個人的な見解です.ionic 2で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>segmentOneh2>
      ion-item>
    ion-list>

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

    <ion-list *ngSwitchCase="'segmentThree'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="assets/icon/favicon.ico">
        ion-thumbnail>
        <h2>segmentThreeh2>
      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ノードで使用する場合は、HammerJsなどのサードパーティジェスチャーイベントjsを使用して操作できます.