學(xué)習(xí)要點：
1. 選項卡 : ion-tabs 簡介
2. ion-tabs 常用設(shè)置
3. ion-tabs 下面的 ion-tab ：標題文字、圖標和徽章 顯示隱藏
4. ion-tabs 事件 和 $ionicTabsDelegate
5. ion-tabs 路由詳解

專注于為中小企業(yè)提供網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)翁牛特免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

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屬性值將作為選項頁的標題其 內(nèi)容將填充選項卡書簽欄之外的剩余
區(qū)域（被應(yīng)用.pane 樣式）。
注意：
1. 不要把 ion-tabs 指令放在 ion-content 之內(nèi)
2. ion-tab 的內(nèi)容應(yīng)當放入 ion-view 指令內(nèi)，否則 ionic 在計算布局時可能出錯
AngularJS 編譯后， ion-tabs 元素將被應(yīng)用.tabs 樣式，因此我們可以使用 相關(guān)的樣式調(diào)整
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常用設(shè)置
ion-tabs聲明條帶風(fēng)格：

如果學(xué)習(xí)過課程： ionic 之 CSS 框架，應(yīng)該記得使用.tabs-striped 樣式可以將選項卡 聲明為條帶風(fēng)格：
.tabs-standard 申明不帶條風(fēng)格
<ion-tabs class="tabs-striped">...</ion-tabs>
也可以通過$ionicConfigProvider 在 AngularJS 的配置階段，將選項卡設(shè)置為條帶風(fēng)格：

app.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.style("striped"); // 參數(shù)可以是： standard | striped
})

ion-tabs : 聲明位置：
如果學(xué)習(xí)過課程： ionic 之 CSS 框架，應(yīng)該記得使用.tabs-top 可以將選項卡置于 頂部標題欄之下：
<ion-tabs class="tabs-top">...</ion-tabs>
也可以通過$ionicConfigProvider，在配置階段設(shè)置選項卡的位置是在頂部還是底部：

app.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.position("top"); //參數(shù)可以是： top | bottom
});

3． ion-tabs下面的 ion-tab： 標題文字、圖標和徽章顯示隱藏
ion-tab 指令有以下屬性用于設(shè)置文本、圖標和徽章：
title - 標題文字

標題文字是必須的。該屬性值將作為選項頁的標題文字。

icon - 標題圖標
使用 icon 屬性是可選的，該屬性值將用來在標題文字旁邊添加一個指定的圖標。 這個屬性的值將被作為
icon-on 和 icon-off 的默認值

icon-on - 被選中狀態(tài)的標題圖標
如果一個選項頁被選中， ion-tabs 將使用 icon-on 屬性的值繪制圖標。如果 icon-on 沒有設(shè)置，那么
ion-tabs 就使用 icon 屬性的值繪制圖標

icon-off - 未選中狀態(tài)的標題圖標
如果一個選項頁沒有被選中， ion-tabs 將使用 icon-off 屬性的值繪制圖標。如果 icon-off 沒有設(shè)置，那
么 ion-tabs 就使用 icon 屬性的值繪制圖標

badge - 標題徽章
ion-tabs 使用 badge 屬性的值在標題文字旁邊添加一個圓形的文字標識，通常用來 顯示數(shù)字。這個屬性
是可選的，可以是一個具體的值，也可以是當前作用域上的 一個變量

badge-style - 標題徽章樣式
使用 badge-style 屬性設(shè)置徽章的樣式， 比如配色方案： barge-{color}
hidden - 隱藏
hidden 屬性是當前作用域上的表達式。 當其值為 true 時，選項頁將不可見
disabled - 禁止
disabled 屬性是當前作用域上的表達式。當值為 true 時，選項頁將不響應(yīng) 用戶的點擊

<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 - 選中事件
可選。選項頁從未選中狀態(tài)切換到選中狀態(tài)時執(zhí)行此表達式
on-deselect - 未選中事件
可選。選項頁從選中狀態(tài)切換到未選中狀態(tài)時執(zhí)行此表達式
ng-click - 點擊事件
可選。選項頁被點擊時執(zhí)行此表達式。如果這個屬性被設(shè)置，那么 ion-tabs 將不會 自動切換選項頁，調(diào)
用者需要手動調(diào)用$ionicTabsDelegate 的 select()方法進行 選項頁切換

2.ionicTabsDelegate

使用$ionicTabsDelegate 服務(wù)，我們可以在腳本中控制選項卡對象：
select(index) - 選中指定的選項頁
index 參數(shù)從 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.觸發(fā)狀態(tài)遷移的幾種方式（通俗的講就是頁面跳轉(zhuǎn)的幾種方式）
1. 調(diào)用$state.go() 方法，這是一個高級的便利方法；
2. 點擊包含 ui-sref 指令的鏈接 <a ui-sref="state1">Go State 1</a>
3. 導(dǎo)航到與狀態(tài)相關(guān)聯(lián)的 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 中結(jié)合 tab 狀態(tài)嵌套的幾種方式
狀態(tài)可以相互嵌套。有三個嵌套的方法：
1.使用“點標記法”，例如： .state('contacts.list', {})
2.使用 parent 屬性，指定一個父狀態(tài)的名稱字符串，例如： parent: 'contacts'
3.使用 parent 屬性，指定一個父狀態(tài)對象，例如： parent: contacts（ contacts 是一個狀態(tài)對象）
1.點標記法
在$stateProvider 中可以使用點語法來表示層次結(jié)構(gòu)，下面， contacts.list 是 contacts 的子狀態(tài)。

$stateProvider
.state('contacts', {})
.state('contacts.list', {});

2.使用 parent 屬性，指定一個父狀態(tài)的名稱字符串
$stateProvider
.state('contacts', {})
.state('list', {
parent: 'contacts'
});
3.基于對象的狀態(tài)
如果你不喜歡使用基于字符串的狀態(tài)，您還可以使用基于對象的狀態(tài)。 name 屬性將在狀態(tài)對象內(nèi)部設(shè)
置，在所有的子狀態(tài)對象中設(shè)置 parent 屬性為父狀態(tài)對象，像下面這樣：

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 路由結(jié)合 tap 實現(xiàn)頁面切換
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 并對應(yīng) ion-nav-view 中的 name 屬性
$stateProvider.state('news', {
url: "/news",
abstract:true,
templateUrl: "templates/news.html"
})
.state('news.list', {
url: '/list',
views: {
'news-list': {
templateUrl: 'templates/news-list.html'
}
}
})
5. ionic states 抽象狀態(tài) abstract
一個抽象的狀態(tài)可以有子狀態(tài)但不能顯式激活，它將被隱性激活當其子狀態(tài)被激活時。
下面是兩個最常用的抽象狀態(tài)的示例：
為所有子狀態(tài)預(yù)提供一個基 url
在父狀態(tài)中設(shè)置 template 屬性，子狀態(tài)對應(yīng)的模板將插入到父狀態(tài)模板中的 ui-view(s)中

交流QQ群：187269144

QQ群2：438443293

QQ群3：248403526

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站名稱：ionicion-tap選項卡以及路由結(jié)合ion-tap詳解-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://sd-ha.com/article4/shhoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站營銷、企業(yè)網(wǎng)站制作、移動網(wǎng)站建設(shè)、定制網(wǎng)站、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)