滑过分段标签 - Ionic 3

Question

下面的代码使用离子3的片段.docs显示了使用ngSwitch，ngModel。但我想简单地在段上滑动并切换到另一个段标签。我怎样才能做到这一点？

我对滑动顶部的标签不感兴趣，但是通过在内容上滑动我想更改分段标签。

<ion-content padding>

  <div>
    <ion-segment [(ngModel)]="abc">
      <ion-segment-button value="Segment1">
        Segment Title
      </ion-segment-button>
      <ion-segment-button value="segment2">
        Segment Title
      </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="abc">
    <ion-list *ngSwitchCase="'segment2'" class="list-fixed">
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/1.jpg">
        </ion-thumbnail>
        <h2>List Item 1</h2>
        <p>List Item Subtitle</p>
        <button ion-button clear item-end>View</button>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'segment1'" class="list-fixed">
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/3.png">
        </ion-thumbnail>
        <h2>List Item Title 1</h2>
        <p>Subheading</p>
        <button ion-button clear item-end>View</button>
      </ion-item>
    </ion-list>
  </div>

Answer 1

我的解决方案是添加：

.html文件

//Add below code where you would like to detect the swipe from users input
// When user makes a swipe simply check and do the switch between Tabs.

(pan)='swipeEvent($event)' 

.ts文件

pages: string = "pageA";

swipeEvent($e) {
    console.log($e.deltaX+", "+$e.deltaY);
    if($e.deltaX > 0){
      console.log("Swipe from Left to Right");
      this.pages = "pageB";
    }else{
      console.log("Swipe from Right to Left");
      this.pages = "pageA";
    }
}

感谢David的评论