溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
學習要點：
1. 選項卡 : ion-tabs 簡介
2. ion-tabs 常用設置
3. ion-tabs 下面的 ion-tab ：標題文字、圖標和徽章 顯示隱藏
4. ion-tabs 事件 和 $ionicTabsDelegate
5. ion-tabs 路由詳解
1． 選項卡 : ion-tabs 簡單介紹
使用 ion-tabs 指令聲明選項卡，使用 ion-tab 聲明選項頁：
<ion-tabs>
<ion-tab title="xxx">...</ion-tab>
<ion-tab title=" xxx ">...</ion-tab>
...
</ion-tabs>
每個 ion-tab元素的 title屬性值將作為選項頁的標題其 內容將填充選項卡書簽欄之外的剩余
區域（被應用.pane 樣式）。
注意：
1. 不要把 ion-tabs 指令放在 ion-content 之內
2. ion-tab 的內容應當放入 ion-view 指令內，否則 ionic 在計算布局時可能出錯
AngularJS 編譯后， ion-tabs 元素將被應用.tabs 樣式，因此我們可以使用 相關的樣式調整
ion-tabs 的外觀：
<ion-tabs>
<ion-tab title="tab1">
<ion-view>
<ion-content class="calm-bg">
tab 1 content
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="tab2">
<ion-view>
<ion-content class="balanced-bg">
tab 2 content
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="tab3">
<ion-view>
<ion-content class="energized-bg">
tab 3 content
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
2． ion-tabs 常用設置
ion-tabs 聲明條帶風格：
如果學習過課程： ionic 之 CSS 框架，應該記得使用.tabs-striped 樣式可以將選項卡 聲明為條帶風格：
.tabs-standard 申明不帶條風格
<ion-tabs class="tabs-striped">...</ion-tabs>
也可以通過$ionicConfigProvider 在 AngularJS 的配置階段，將選項卡設置為條帶風格：
app.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.style("striped"); // 參數可以是： standard | striped
})
ion-tabs : 聲明位置：
如果學習過課程： ionic 之 CSS 框架，應該記得使用.tabs-top 可以將選項卡置于 頂部標題欄之下：
<ion-tabs class="tabs-top">...</ion-tabs>
也可以通過$ionicConfigProvider，在配置階段設置選項卡的位置是在頂部還是底部：
app.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.position("top"); //參數可以是： top | bottom
});
3． ion-tabs 下面的 ion-tab ： 標題文字、圖標和徽章顯示隱藏
ion-tab 指令有以下屬性用于設置文本、圖標和徽章：
title - 標題文字
標題文字是必須的。該屬性值將作為選項頁的標題文字。
icon - 標題圖標
使用 icon 屬性是可選的，該屬性值將用來在標題文字旁邊添加一個指定的圖標。 這個屬性的值將被作為
icon-on 和 icon-off 的默認值
icon-on - 被選中狀態的標題圖標
如果一個選項頁被選中， ion-tabs 將使用 icon-on 屬性的值繪制圖標。如果 icon-on 沒有設置，那么
ion-tabs 就使用 icon 屬性的值繪制圖標
icon-off - 未選中狀態的標題圖標
如果一個選項頁沒有被選中， ion-tabs 將使用 icon-off 屬性的值繪制圖標。如果 icon-off 沒有設置，那
么 ion-tabs 就使用 icon 屬性的值繪制圖標
badge - 標題徽章
ion-tabs 使用 badge 屬性的值在標題文字旁邊添加一個圓形的文字標識，通常用來 顯示數字。這個屬性
是可選的，可以是一個具體的值，也可以是當前作用域上的 一個變量
badge-style - 標題徽章樣式
使用 badge-style 屬性設置徽章的樣式， 比如配色方案： barge-{color}
hidden - 隱藏
hidden 屬性是當前作用域上的表達式。 當其值為 true 時，選項頁將不可見
disabled - 禁止
disabled 屬性是當前作用域上的表達式。當值為 true 時，選項頁將不響應 用戶的點擊
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-view>
<ion-header-bar class="bar-positive">
<h2 class="title">home tab</h2>
</ion-header-bar>
<ion-content>
<p>home content</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" badge="12"
badge->
<ion-view>
<ion-header-bar class="bar-positive">
<h2 class="title">about tab</h2>
</ion-header-bar>
<ion-content>
<p>about content</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<ion-view>
<ion-header-bar class="bar-positive">
<h2 class="title">settings tab</h2>
</ion-header-bar>
<ion-content>
<p>settings content</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
4． ion-tabs 事件 和 $ionicTabsDelegate
1.ion-tab 事件：
on-select - 選中事件
可選。選項頁從未選中狀態切換到選中狀態時執行此表達式
on-deselect - 未選中事件
可選。選項頁從選中狀態切換到未選中狀態時執行此表達式
ng-click - 點擊事件
可選。選項頁被點擊時執行此表達式。如果這個屬性被設置，那么 ion-tabs 將不會 自動切換選項頁，調
用者需要手動調用$ionicTabsDelegate 的 select()方法進行 選項頁切換
2.ionicTabsDelegate
使用$ionicTabsDelegate 服務，我們可以在腳本中控制選項卡對象：
select(index) - 選中指定的選項頁
index 參數從 0 開始，第一個選項頁的 index 為 0，第二個為 1，依次類推。
selectedIndex() - 返回當前選中選項頁的索引號
如果當前沒有選中的選項頁，則返回 -1。
angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope,$ionicTabsDelegate,$interval){
var idx=0;
$interval(function(){
idx = (idx + 1) % 3;
$ionicTabsDelegate.select(idx);
},2000);
});
5． ion-tabs 路由詳解
1. 觸發狀態遷移的幾種方式（通俗的講就是頁面跳轉的幾種方式）
1. 調用$state.go() 方法，這是一個高級的便利方法；
2. 點擊包含 ui-sref 指令的鏈接 <a ui-sref="state1">Go State 1</a>
3. 導航到與狀態相關聯的 url。
2. 通過 href 方式頁面切換需要指定 url
var app = angular.module("myApp", ["ionic"]);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state("home", {
url: "/home",
templateUrl: "home.html",
controller:'homeController'
})
.state("music", {
url: "/music",
templateUrl: "music.html",
controller:'musicController'
});
})
.controller("myCtrl",function($scope,$state){
$state.go("home");
})
//
.controller("homeController",function($scope){
console.log('home');
})
.controller("musicController",function($scope){
console.log('music');
})
</script>
3. ionic 中結合 tab 狀態嵌套的幾種方式
狀態可以相互嵌套。有三個嵌套的方法：
1.使用“點標記法”，例如： .state('contacts.list', {})
2.使用 parent 屬性，指定一個父狀態的名稱字符串，例如： parent: 'contacts'
3.使用 parent 屬性，指定一個父狀態對象，例如： parent: contacts（ contacts 是一個狀態對象）
1.點標記法
在$stateProvider 中可以使用點語法來表示層次結構，下面， contacts.list 是 contacts 的子狀態。
$stateProvider
.state('contacts', {})
.state('contacts.list', {});
2.使用 parent 屬性，指定一個父狀態的名稱字符串
$stateProvider
.state('contacts', {})
.state('list', {
parent: 'contacts'
});
3.基于對象的狀態
如果你不喜歡使用基于字符串的狀態，您還可以使用基于對象的狀態。 name 屬性將在狀態對象內部設
置，在所有的子狀態對象中設置 parent 屬性為父狀態對象，像下面這樣：
var contacts = {
name: 'contacts', //mandatory
templateUrl: 'contacts.html'
}
var contactsList = {
name: 'list', //mandatory
parent: contacts, //mandatory
templateUrl: 'contacts.list.html'
}
$stateProvider
.state(contacts)
.state(contactsList)
4. ionic 路由結合 tap 實現頁面切換
1. 在 ionic tab 中定義 ion-nav-view 并且加上 name 屬性
<ion-nav-view name="news-list"></ion-nav-view>
<ion-tabs class="tabs-icon-top tabs-positive">
<!-- Dashboard Tab -->
<ion-tab title="list" icon-off="ion-ios-pulse"
icon-on="ion-ios-pulse-strong" href="#/news/list">
<ion-nav-view name="news-list"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="content" icon-off="ion-ios-chatboxes-outline"
icon-on="ion-ios-chatboxes" href="#/news/content">
<ion-nav-view name="news-content"></ion-nav-view>
</ion-tab>
</ion-tabs>
2. 在 ionic $stateProvider.state 中定義 view 并對應 ion-nav-view 中的 name 屬性
$stateProvider.state('news', {
url: "/news",
abstract:true,
templateUrl: "templates/news.html"
})
.state('news.list', {
