Search code examples
androidioscsstypescriptionic3

Ionic 3 - How to implement viewpager?

I am currently developing an application using Ionic 3, the main screen consists of 3 tabs (ion-tabs) I created a function to change tabs according to the user's swipe, however my client asks for a transition equal to WhatsApp and I do not know to implement this. I thought of using ion-slides but I would have to migrate the code from the 3 tabs to a single view, is there a way to append the animation without having to change the component?

<ion-tabs #Tabs no-border tabsPlacement="top" tabsHighlight='true' color="secondary" >
    <ion-tab [root]="disponiveisRoot" tabTitle="Disponiveis" ></ion-tab>
    <ion-tab [root]="meusPedidosRoot" tabTitle="Meus pedidos" ></ion-tab>
    <ion-tab [root]="finalizadosRoot" tabTitle="Finalizados" ></ion-tab>
</ion-tabs>

enter image description here

Solution

  • You can use ionic2-super-tabs. This library makes it possible to make swipable tabs easily. You have to check the github page for compatability and which version you should use.

    With the library a basic example would be as below. It's almost the same as the tabs from Ionic it self.

    Basic example

    Component:

    export class MyPage {

  page1: any = Page1Page;
  page2: any = Page2Page;
  page3: any = Page3Page;

}

    HTML:

    <super-tabs>
  <super-tab [root]="page1" title="First page"></super-tab>
  <super-tab [root]="page2" title="Second page"></super-tab>
  <super-tab [root]="page3" title="Third page"></super-tab>
</super-tabs>