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>
效果如下所示：
| 屬性 | 類型 | 詳情 |
|---|---|---|
| delegate-handle (可選) | 字符串 | 該句柄用 |
隸屬于ionTabs
包含一個選項卡內容。該內容僅存在于被選中的給定選項卡中。
每個ionTab都有自己的瀏覽歷史。
<ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"> </ion-tab>
| 屬性 | 類型 | 詳情 |
|---|---|---|
| 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()來指定切換標簽。 |
授權控制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);
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
