免費(fèi)AI編程助手
ionic 選項(xiàng)卡欄操作
ionic 選項(xiàng)卡欄操作
ion-tabs
ion-tabs 是有一組頁(yè)面選項(xiàng)卡組成的選項(xiàng)卡欄?？梢酝ㄟ^(guò)點(diǎn)擊選項(xiàng)來(lái)切換頁(yè)面。
對(duì)于 iOS，它會(huì)出現(xiàn)在屏幕的底部，Android會(huì)出現(xiàn)在屏幕的頂部(導(dǎo)航欄下面)。
用法
<ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="首頁(yè)" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline"> <!-- 標(biāo)簽 1 內(nèi)容 --> </ion-tab> <ion-tab title="關(guān)于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline"> <!-- 標(biāo)簽 2 內(nèi)容 --> </ion-tab> <ion-tab title="設(shè)置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline"> <!-- 標(biāo)簽 3 內(nèi)容 --> </ion-tab> </ion-tabs>
效果如下所示：
API
| 屬性 | 類(lèi)型 | 詳情 |
|---|---|---|
| delegate-handle (可選) | 字符串 | 該句柄用 |
ion-tab
隸屬于ionTabs
包含一個(gè)選項(xiàng)卡內(nèi)容。該內(nèi)容僅存在于被選中的給定選項(xiàng)卡中。
每個(gè)ionTab都有自己的瀏覽歷史。
用法
<ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"> </ion-tab>
API
| 屬性 | 類(lèi)型 | 詳情 |
|---|---|---|
| title | 字符串 | 選項(xiàng)卡的標(biāo)題。 |
| href (可選) | 字符串 | 但觸碰的時(shí)候，該選項(xiàng)卡將會(huì)跳轉(zhuǎn)的的鏈接。 |
| icon (可選) | 字符串 | 選項(xiàng)卡的圖標(biāo)。如果給定值，它將成為ion-on和ion-off的默認(rèn)值。 |
| icon-on (可選) | 字符串 | 被選中標(biāo)簽的圖標(biāo)。 |
| icon-off (可選) | 字符串 | 沒(méi)被選中標(biāo)簽的圖標(biāo)。 |
| badge (可選) | 表達(dá)式 | 選項(xiàng)卡上的徽章（通常是一個(gè)數(shù)字）。 |
| badge-style (可選) | 表達(dá)式 | 選項(xiàng)卡上微章的樣式（例，tabs-positive ）。 |
| on-select (可選) | 表達(dá)式 | 選項(xiàng)卡被選中時(shí)觸發(fā)。 |
| on-deselect (可選) | 表達(dá)式 | 選項(xiàng)卡取消選中時(shí)觸發(fā)。 |
| ng-click (可選) | 表達(dá)式 | 通常，點(diǎn)擊時(shí)選項(xiàng)卡會(huì)被選中。如果設(shè)置了 ng-Click，它將不會(huì)被選中。 你可以用$ionicTabsDelegate.select()來(lái)指定切換標(biāo)簽。 |
$ionicTabsDelegate
授權(quán)控制ionTabs指令。
該方法直接調(diào)用$ionicTabsDelegate服務(wù)，控制所有ionTabs指令。用$getByHandle方法控制具體的ionTabs實(shí)例。
用法
<body ng-controller="MyCtrl"> <ion-tabs> <ion-tab title="Tab 1"> 你好，標(biāo)簽1！ <button ng-click="selectTabWithIndex(1)">選擇標(biāo)簽2</button> </ion-tab> <ion-tab title="Tab 2">你好標(biāo)簽2！</ion-tab> </ion-tabs> </body>
function MyCtrl($scope, $ionicTabsDelegate) { $scope.selectTabWithIndex = function(index) { $ionicTabsDelegate.select(index); } }
方法
select(index, [shouldChangeHistory])
選擇標(biāo)簽來(lái)匹配給定的索引。
| 參數(shù) | 類(lèi)型 | 詳情 |
|---|---|---|
| index | 數(shù)值 | 選擇標(biāo)簽的索引。 |
| shouldChangeHistory (可選) | 布爾值 | 此選項(xiàng)是否應(yīng)該加載這個(gè)標(biāo)簽的瀏覽歷史（如果存在），并使用，或僅加載默認(rèn)頁(yè)面。默認(rèn)為false。提示：如果一個(gè) |
selectedIndex()
返回值: 數(shù)值, 被選中標(biāo)簽的索引，如 -1。
$getByHandle(handle)
| 參數(shù) | 類(lèi)型 | 詳情 |
|---|---|---|
| handle | 字符串 |
例如:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);
更多建議：