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 (可選) | 字符串 | 該句柄用 |
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。 提示:如果一個 |
selectedIndex()
返回值:數值,被選中標籤的索引,如-1。
$getByHandle(handle)
參數 | 類型 | 詳情 |
---|---|---|
handle | 字符串 |
例如:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);