Ionic 3-如何实现viewpager？

Question

[我目前正在使用Ionic 3开发应用程序，主屏幕包含3个标签（ion-tabs），我创建了一个功能，可以根据用户的滑动来更改标签，但是我的客户要求进行与WhatsApp相等的转换，我不知道要实现这一点。我曾想过使用ion-slides，但是我必须将代码从3个选项卡迁移到单个视图，有没有一种方法可以在不更改组件的情况下追加动画？

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

Answer 1

您可以使用ionic2-super-tabs。该库使轻松制作可滑动的选项卡成为可能。您必须检查github页面的兼容性以及应该使用哪个版本。

使用该库，一个基本示例如下。它与Ionic it self的选项卡几乎相同。

基本示例

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>