Tabs

ion-tabs

ion-tabs 可以方便地在应用程序的不同页面或功能方面进行导航。

用法

<ion-tabs>
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

@Component({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root = Page1;
  tab2Root = Page2;
  tab3Root = Page3;

  constructor() {

  }
}

通常 Tabbar 会选择第一个Page，可以通过selectedIndex改变选择Page。

<ion-tabs selectedIndex="2">
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

如果你想要动态改变选中tab：

1. 可以使用 property binding.
2. 获取选项卡实例并调用select()方法。-> 在<ion-tabs> 添加 id 属性 .

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

然后在您的类中，您可以获取选项卡实例并调用select()，将选项卡的索引作为参数传递。这里我们用ViewChild抓取选项卡。

export class TabsPage {

@ViewChild('myTabs') tabRef: Tabs;

ionViewDidEnter() {
  this.tabRef.select(2);
 }
}

也可以从一个自页面切换tab

switchTabs() {
  this.navCtrl.parent.select(2);
}

实例成员

getByIndex(index)

返回匹配到的tab

getSecondaryIdentifier()

getSelected()

返回当前选中的tab

getType()

goToRoot()

previousTab(trimHistory)

select(tabOrIndex)

选中那一个tab

viewCtrl

属性

属性	类型	详解
name	string	选项卡的唯一名称。
selectedIndex	number	第一次加载时默认选中的选项卡索引。如果没有提供选定的索引，那么它将使用第一个选项卡0。
tabsHighlight	boolean	如果是true，在选中的选项卡下显示选项卡。
tabsLayout	string	设置tabbar布局，icon-top, icon-start, icon-end, icon-bottom, icon-hide, title-hide
tabsPlacement	string	设置tabbar位置，top, bottom

输出事件

属性	详解
ionChange	tabbar更改时发出。

Sass Variables

查询地址