ionic 教程
ion-tabs 是有一組頁面選項卡組成的選項卡欄。可以通過點擊選項來切換頁面。
對于 iOS，它會出現(xiàn)在屏幕的底部，Android會出現(xiàn)在屏幕的頂部(導(dǎo)航欄下面)。
效果如下所示：
| 屬性 | 類型 | 詳情 |
|---|---|---|
|
delegate-handle
(可選)
|
字符串
|
該句柄用 |
隸屬于ionTabs
包含一個選項卡內(nèi)容。該內(nèi)容僅存在于被選中的給定選項卡中。
每個ionTab都有自己的瀏覽歷史。
<ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"> </ion-tab>
| 屬性 | 類型 | 詳情 |
|---|---|---|
| title |
字符串
|
選項卡的標題。 |
|
href
(可選)
|
字符串
|
當觸碰的時候，該選項卡將會跳轉(zhuǎn)的的鏈接。 |
|
icon
(可選)
|
字符串
|
選項卡的圖標。如果給定值，它將成為ion-on和ion-off的默認值。 |
|
icon-on
(可選)
|
字符串
|
被選中標簽的圖標。 |
|
icon-off
(可選)
|
字符串
|
沒被選中標簽的圖標。 |
|
badge
(可選)
|
表達式
|
選項卡上的徽章（通常是一個數(shù)字）。 |
|
badge-style
(可選)
|
表達式
|
選項卡上微章的樣式（例，tabs-positive ）。 |
|
on-select
(可選)
|
表達式
|
選項卡被選中時觸發(fā)。 |
|
on-deselect
(可選)
|
表達式
|
選項卡取消選中時觸發(fā)。 |
|
ng-click
(可選)
|
表達式
|
通常，點擊時選項卡會被選中。如果設(shè)置了 ng-Click，它將不會被選中。 你可以用$ionicTabsDelegate.select()來指定切換標簽。 |
授權(quán)控制ionTabs指令。
該方法直接調(diào)用$ionicTabsDelegate服務(wù)，控制所有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])
選擇標簽來匹配給定的索引。
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| index |
數(shù)值
|
選擇標簽的索引。 |
|
shouldChangeHistory
(可選)
|
布爾值
|
此選項是否應(yīng)該加載這個標簽的瀏覽歷史（如果存在），并使用，或僅加載默認頁面。默認為false。提示：如果一個 |
selectedIndex()
返回值: 數(shù)值, 被選中標簽的索引，如 -1。
$getByHandle(handle)
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| handle |
字符串
|
例如:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);