Ionic2/Angular2 - How to swipe (right and left) between views/pages and tabs?

问题

I am willing to implement a swipe right/left gesture between tabs/pages, like the one here:

https://camo.githubusercontent.com/90e2e5abbe8155744d579951b93a1260edef855e/687474703a2f2f692e696d6775722e636f6d2f7a6c66574461312e676966

Also available on GitHub through this link (for iOS)

https://github.com/cwRichardKim/RKSwipeBetweenViewControllers

Another example, but that one was made based on Ionic1:

www.ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/slidingTabsUsingRepeat.html

Anyone knows how to achieve that in Ionic2/Angular2? If you can share even just an idea, steps to achieve the same, it'll be very helpful!

回答1:

Swiping between tabs is not supported yet but will be at some point in the future with Ionic 2.

Check out our roadmap for Ionic 2. As you can see, it is tentatively scheduled for beta-7, and beta-6 was just released last week. It is tentative, though.

https://docs.google.com/document/d/1Qlc5X2eJyOB0izkFlH7KJ5BmMi0MeXUZRHJHt3hS6Wo/edit?usp=sharing

回答2:

I did this manually by importing "ViewChild" from '@angular/core' and "Slides" from 'ionic-angular' `

So you need to have your [HTML] code in the following way:

<ion-segment [(ngModel)]="query" (ionChange)="showdata()">
  <ion-segment-button value="slide1">
    TabTitle1
  </ion-segment-button>
  <ion-segment-button value="slide2">
     TabTitle2
  </ion-segment-button>
  <ion-segment-button value="slide3">
     TabTitle3
  </ion-segment-button>
</ion-segment> 
<ion-slides (ionSlideDidChange)="slideChanged()">
  <ion-slide>
    Some Content
  </ion-slide>
  <ion-slide>
    Some Content
  </ion-slide>
  <ion-slide>
    Some Content
  </ion-slide>
</ion-slides>

Now let me share my Typescript code

import { Component,ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

export class MainPage {

@ViewChild(Slides) slides: Slides;
public query : string = 'slide1';

showdata(){
  if(this.query == 'slide1')
  {
    this.slides.slideTo(0,0);
  }
  if(this.query == 'slide2')
  {      
    this.slides.slideTo(1,0);
  }
  if(this.query == 'slide3')
  {     
    this.slides.slideTo(2,0);
  }
}
// showdata() function ends here !!!

slideChanged(){
    if(this.slides._activeIndex == 0){
        this.query = 'slide1';
    }
    if(this.slides._activeIndex == 1){
        this.query = 'slide2';
    }
    if(this.slides._activeIndex == 2){
        this.query = 'slide3';
    }
}

Bit Change in CSS too:

.swiper-slide {
    overflow-y: scroll;
    display: block;
}

Thats it...Happy coding...!!!

回答3:

apply this when need to uses segment with a swipe

home.html

<ion-segment [(ngModel)]="choosetab" >
        <ion-segment-button value="1" (click)="TabChanges()">
          page 1
        </ion-segment-button>
        <ion-segment-button value="2" (click)="TabChanges()">
         page 2
        </ion-segment-button>
        <ion-segment-button value="3" (click)="TabChanges()">
         page 3
        </ion-segment-button>
</ion-segment>

<div [ngSwitch]="choosetab">

    <ion-slides (ionSlideWillChange)="slideChanged()" >
      <ion-slide>
        <ion-list *ngSwitchCase="'1'" >

        </ion-list>
      </ion-slide>
      <ion-slide>
        <ion-list *ngSwitchCase="'2'" >

        </ion-list>
      </ion-slide>
         <ion-slide>
          <ion-list *ngSwitchCase="'3'" >

          </ion-list>
        </ion-slide> 
    </ion-slides>
  </div>

home.ts

 slideChanged() {
  let currentIndex = this.slides.getActiveIndex();

  if (currentIndex == 0) {
    this.choosesegment = '1'
  }
  else if (currentIndex == 1) {
    this.choosesegment = '2'
  }
  else {
    this.choosesegment = '3'
  }

}

use this to every segment button , (click)="TabsChanges()"

TabChanges() {
  let len: number = this.slides.length()
  let currentIndex = this.slides.getActiveIndex();
  if (len > 0) {
    if (this.choosesegment === '1') {
      if (currentIndex != 0) {
        this.slides.slideTo(0)

      }
    }
    else if (this.choosesegment === '2') {
      if (currentIndex != 1) {
        this.slides.slideTo(1)

      }
    }
    else if (this.choosesegment === '3') {
      if (currentIndex != 2) {
        this.slides.slideTo(2)
      }
    }
  }
}

remember to import Slides from ionic-angular

import {Slides} from 'ionic-angular';
import {ViewChild } from '@angular/core';


@ViewChild(Slides) slides: Slides;

来源：https://stackoverflow.com/questions/37016210/ionic2-angular2-how-to-swipe-right-and-left-between-views-pages-and-tabs