| 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 |
有了这个对应关系我们就可以通过这个来进行左右滑动的判断了，以下是详细代码：
<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>
</ion-thumbnail>
<h2>segmentOne</h2>
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'segmentTwo'">
<ion-item>
<ion-thumbnail item-left>
</ion-thumbnail>
<h2>segmentTwo</h2>
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'segmentThree'">
<ion-item>
<ion-thumbnail item-left>
</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。
