Ionic2 可以左右滑动的Segment

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

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

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

  
    
      Segments
    
  

  
    
      
        segmentOne
      
      
        segmentTwo
      
      
        segmentThree
      
    
  



  

    
      
        
          ![](assets/icon/favicon.ico)
        
        
segmentOne
      
    

    
      
        
          ![](assets/icon/favicon.ico)
        
        
segmentTwo
      
    

    
      
        
          ![](assets/icon/favicon.ico)
        
        
segmentThree
      
    
  

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节点使用可以借助第三方手势事件js来操作，比如HammerJs。