ionic 選項卡欄操作

ion-tabs

ion-tabs 是有一組頁面選項卡組成的選項卡欄。可以通過點擊選項來切換頁面。

對於 iOS，它會出現在螢幕的底部，Android會出現在螢幕的頂部(導航欄下麵)。

用法

實例

<ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="首頁" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> <!-- 標籤 1 內容 --> </ion-tab> <ion-tab title="關於" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> <!-- 標籤 2 內容 --> </ion-tab> <ion-tab title="設置" icon-on="ion-ios-gear" icon-off="ion-ios-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])

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

參數 類型 詳情
index 數值

選擇標籤的索引。
shouldChangeHistory
(可選)
 布爾值

此選項是否應該加載這個標籤的流覽歷史（如果存在），並使用，或僅加載默認頁面。默認為false。提示：如果一個ion-nav-view在選項卡裏，你可能需要設置它為true。

 
selectedIndex()

返回值: 數值, 被選中標籤的索引，如 -1。

$getByHandle(handle)
參數 類型 詳情
handle 字串

例如:

$ionicTabsDelegate.$getByHandle('my-handle').select(0);