【问题标题】:Ionic 3 - How to implement viewpager?Ionic 3 - 如何实现viewpager?
【发布时间】:2018-11-08 05:32:25
【问题描述】:

我目前正在使用 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>

【问题讨论】:

    标签: android ios css typescript ionic3


    【解决方案1】:

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

    使用该库,一个基本示例如下所示。它与 Ionic it self 中的标签几乎相同。

    基本示例

    组件:

    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>
    

    【讨论】:

      猜你喜欢
      • 2020-03-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-01-27
      • 2012-11-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多