Ionic2中ion-tabs輸入屬性

水平有限，高手請繞道。

1、設置標簽欄的位置

在Ionic2中Tabs的使用很多，但默認情況下IOS、Android、wp上顯示位置都不同（如下圖），影響了產品的一致性，找到好多資料，都沒搞定，今天查看官方的資料時，發現其實很簡單。

 

 

需要的效果：

<ion-tabs tabbarPlacement="bottom">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

　　

tabbarPlacement參數是兩個值：top和bottom，修改這兩個值，就可以放上放下的更改了。

 另外，還有幾個屬性：

 

參數	類型	說明
selectedIndex	number	第一次加載時，默認選擇的選項卡的索引值。如果沒有設置索引，它將默認使用0，即第一個選項卡。
preloadTabs	boolean	設置是否要預加載的所有選項卡: true, false.
tabbarLayout	string	設置標簽欄的布局: icon-top, icon-left, icon-right, icon-bottom, icon-hide, title-hide.
tabbarPlacement	string	設置標簽欄的位置: top, bottom.

 

 2、設置第一次先中哪一個選項卡

以下表示第一次加載時，默認選中最后一個選項卡tab3Root

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

也可以通過代碼進行設置

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

 

export class TabsPage {
//在這里，我們通過ViewChild來ion-tabs這個標簽
@ViewChild('myTabs') tabRef: Tabs;
//初次加載時
ionViewDidEnter() {
//設置選項卡的索引值為2，即最后一個
  this.tabRef.select(2);
 }

}

 

二、設置標簽欄的位置也可以通過Config來完成

http://ionicframework.com/docs/v2/api/config/Config/

在ionicBootstrap里面設置，這個地方替換了原來在Conifg里面的選項：

import {ionicBootstrap} from 'ionic-angular';

ionicBootstrap(AppRoot, customProviders, {
  tabbarPlacement: 'bottom',
});

也可以根據工作平台進行設置：

import {ionicBootstrap} from 'ionic-angular';

ionicBootstrap(AppRoot, customProviders, {
  tabbarPlacement: 'bottom',
  platforms: {
  ios: {
    tabbarPlacement: 'top',
  }
});