ionic 選項卡欄操作


ion-tabs

ion-tabs 是由一組頁面標籤組成的選項卡欄。可以透過點擊選項來切換頁面。

對於 iOS，它會出現在螢幕的底部，Android會出現在螢幕的頂部(導覽列下面)。

用法

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- 标签 1 内容 -->
  </ion-tab>

  <ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- 标签 2 内容 -->
  </ion-tab>

  <ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- 标签 3 内容 -->
  </ion-tab>

</ion-tabs>


效果如下：

API

屬性類型詳情
#delegate-handle
##(可選)
字串該句柄用

$ionicTabsDelegate來識別這些選項卡。

ion-tab

隸屬於ionTabs

#包含一個選項卡內容。該內容僅存在於被選取的給定選項卡中。

每個ionTab都有自己的瀏覽歷史。

用法

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

API

#屬性類型title字串#選項卡的標題。 href#字串##選項卡取消選取時觸發。
##詳情

(可選)

但觸碰的時候，該選項卡將會跳轉的的連結。
icon(可選)
#字串

選項卡的圖示。如果給定值，它將成為ion-on和ion-off的預設值。
icon-on(可選)

#被選取標籤的圖示。
icon-off(可選)

#沒被選取標籤的圖示。
badge(可選)

##選項卡上的徽章（通常是一個數字）。
badge-style(可選)
表達式

#標籤上微章的樣式（例，tabs-positive ）。
on-select(可選)
表達式

#選項卡被選中時觸發。
on-deselect(可選)

######ng-click######(可選)###############表達式###### #######通常，點擊時選項卡會被選取。如果設定了 ng-Click，它將不會被選中。 你可以用$ionicTabsDelegate.select()來指定切換標籤。 ################

$ionicTabsDelegate

授權控制ionTabs指令。

此方法直接呼叫$ionicTabsDelegate服務，控制所有ionTabs指令。用$getByHandle方法控制特定的ionTabs實例。

用法

<body ng-controller="MyCtrl">
  <ion-tabs>

    <ion-tab title="Tab 1">
      你好，标签1！
      <button ng-click="selectTabWithIndex(1)">选择标签2</button>
    </ion-tab>
    <ion-tab title="Tab 2">你好标签2！</ion-tab>

  </ion-tabs>
</body>
function MyCtrl($scope, $ionicTabsDelegate) {
  $scope.selectTabWithIndex = function(index) {
    $ionicTabsDelegate.select(index);
  }
}

方法

select(index, [shouldChangeHistory])

選擇標籤來匹配給定的索引。

##indexshouldChangeHistory##布林值此選項是否應該載入這個標籤的瀏覽歷史記錄（如果存在），並使用，或僅載入預設頁面。預設為false。提示：如果一個
selectedIndex()
參數類型詳情
數值選擇標籤的索引。

(可選)
ion-nav-view

在選項卡里，你可能需要將它設定為true。

傳回值:

數值, 被選取標籤的索引，如 -1。 

$getByHandle(handle)

參數##handle #例如:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);
類型#詳情
字串
←