Geek Answers Handbook

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

I am ready to implement swipe right / left between tabs / pages, for example, here:

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

Also available on GitHub at 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

Does anyone know how to achieve this in Ionic2 / Angular2? If you can share even just an idea, steps to achieve the same, it will be very useful!

+4
source share
3

,   "ViewChild" "@angular/core"    "" "ionic- angular '`

, [HTML] :

<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>

Typescript

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';
    }
}

CSS :

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

... ...!!!

+5

apply this when you need to use a scroll segment

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 for each button of a segment, (press) = "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)
      }
    }
  }
}

don't forget to import slides from ion angular

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


@ViewChild(Slides) slides: Slides;
+1
source

More articles:


All Articles