Ionic 2 / Ionic 3中离子标签上的制表符滑动动画

时间:2017-10-09 12:00:02

标签: javascript ionic-framework ionic2 ionic3

我在以下post中使用Ionic 1进行了Tabs滑动。我想用Ionic 2 app做类似的事情。请帮助我如何做到这一点。我已经发布了我的tabs.html和tabs.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
 
@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
 
  tab1Root: any = 'Tab1Page';
  tab2Root: any = 'Tab2Page';
  tab3Root: any = 'Tab3Page';
  tab4Root: any = 'Tab4Page';
  myIndex: number;
 
  constructor(navParams: NavParams) {
    // Set the active tab based on the passed index from menu.ts
    this.myIndex = navParams.data.tabIndex || 0;
  }
}
<ion-tabs [selectedIndex]="myIndex">
  <ion-tab [root]="tab1Root" tabTitle="Tab1" tabIcon="albums"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab2" tabIcon="people"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Tab3" tabIcon="podium"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Tab4" tabIcon="pricetags"></ion-tab>

</ion-tabs>

0 个答案:

没有答案