ionic 選項卡欄操作

2018-10-13 19:03 更新

ionic 選項卡欄操作


ion-tabs

ion-tabs 是有一組頁面選項卡組成的選項卡欄??梢酝ㄟ^點擊選項來切換頁面。

對于 iOS,它會出現(xiàn)在屏幕的底部,Android會出現(xiàn)在屏幕的頂部(導(dǎo)航欄下面)。

用法

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="首頁" 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

屬性 類型 詳情
delegate-handle
(可選)
字符串

該句柄用$ionicTabsDelegate來標(biāo)識這些選項卡。


ion-tab

隸屬于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>

API

屬性 類型 詳情
title 字符串

選項卡的標(biāo)題。

href
(可選)
字符串

但觸碰的時候,該選項卡將會跳轉(zhuǎn)的的鏈接。

icon
(可選)
字符串

選項卡的圖標(biāo)。如果給定值,它將成為ion-on和ion-off的默認(rèn)值。

icon-on
(可選)
字符串

被選中標(biāo)簽的圖標(biāo)。

icon-off
(可選)
字符串

沒被選中標(biāo)簽的圖標(biāo)。

badge
(可選)
表達(dá)式

選項卡上的徽章(通常是一個數(shù)字)。

badge-style
(可選)
表達(dá)式

選項卡上微章的樣式(例,tabs-positive )。

on-select
(可選)
表達(dá)式

選項卡被選中時觸發(fā)。

on-deselect
(可選)
表達(dá)式

選項卡取消選中時觸發(fā)。

ng-click
(可選)
表達(dá)式

通常,點擊時選項卡會被選中。如果設(shè)置了 ng-Click,它將不會被選中。 你可以用$ionicTabsDelegate.select()來指定切換標(biāo)簽。


$ionicTabsDelegate

授權(quán)控制ionTabs指令。

該方法直接調(diào)用$ionicTabsDelegate服務(wù),控制所有ionTabs指令。用$getByHandle方法控制具體的ionTabs實例。

用法

<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)簽來匹配給定的索引。

參數(shù) 類型 詳情
index 數(shù)值

選擇標(biāo)簽的索引。

shouldChangeHistory
(可選)
布爾值

此選項是否應(yīng)該加載這個標(biāo)簽的瀏覽歷史(如果存在),并使用,或僅加載默認(rèn)頁面。默認(rèn)為false。提示:如果一個ion-nav-view在選項卡里,你可能需要設(shè)置它為true。

selectedIndex()

返回值: 數(shù)值, 被選中標(biāo)簽的索引,如 -1。

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

例如:

$ionicTabsDelegate.$getByHandle('my-handle').select(0);
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號