Ionic Js二十：選項卡欄操作

本文轉載自查看原文 2016-06-17 17:58 1516 App應用快速開發

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>

ion-tab
隸屬於ionTabs
包含一個選項卡內容。該內容僅存在於被選中的給定選項卡中。
每個ionTab都有自己的瀏覽歷史。
用法

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

$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);
  }
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS對於導航欄、下拉菜單以及選項卡的切換操作、大圖輪播（主要練習對於樣式表的操作） JS案例-狀態欄/導航欄/選項卡切換 webAPP制作框架Ionic--構建APP側邊欄底部選項卡輪播圖加載動畫 js選項卡原理及其寫法原生js實現tab選項卡原生js實現選項卡 Android應用底部導航欄(選項卡)實例 js原生選項卡（包含移動端無縫選項卡）三 tab選項卡原生js、jQuery實現選項卡功能