Latest web development tutorials

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])

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

參數 類型 詳情
index 数值

選擇標籤的索引。

shouldChangeHistory
(可選)
布尔值

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

selectedIndex()

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

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

例如:

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