ionic組件ion-tabs選項卡切換效果實例

更新時間：2016年08月27日 17:13:15 作者：安人多夢

這篇文章主要為大家詳細介紹了ionic組件ion-tabs選項卡切換效果實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

介紹

ion-tabs是ionic中的選項卡組件，路由使用的是angular-ui-router.js。因此必須先掌握uiRoute。

效果圖

實例代碼

index.html

<body ng-app="starter">
 <!--ion-nav-view用來渲染模板-->
 <ion-nav-view></ion-nav-view>
</body>

tab-index.html

<ion-tabs class="tabs-icon-only tabs-icon-top ">
 <!--href:選項卡對應(yīng)的狀態(tài) icon-on:ion-tab非高亮圖標  icon-off:ion-tab高亮圖標-->
 <ion-tab title="首頁" href="#/tabs/home" icon-on="ion-new-home-off" icon-off="ion-new-home">
 <!--同一狀態(tài)下有多個ion-nav-view,因此需要給它們設(shè)置name屬性。并在配制路由的時候?qū)?yīng)狀態(tài)和渲染視圖-->
 <ion-nav-view name="tab-home"></ion-nav-view>
 </ion-tab>
 
 <ion-tab title="淘寶" href="#/tabs/taobao" icon-off="ion-new-tf" icon-on="ion-new-tf-off">
 <ion-nav-view name="tab-taobao"></ion-nav-view>
 </ion-tab>
 
 <ion-tab title="好貨" icon-off="ion-new-zhemai" icon-on="ion-new-zhemai-off">
 </ion-tab>
 
 <ion-tab title="我的" href="#/tabs/user" icon-off="ion-new-user" icon-on="ion-new-user-off">
 <ion-nav-view name="tab-user"></ion-nav-view>
 </ion-tab>
</ion-tabs>

config.js

.state("tabs", {
 url: "/tabs",
 templateUrl : "templates/tab/tab-index.html",
 controller : "tabs"
})

.state("tabs.home", {
 url: "/home",
 views : {
 "tab-home" : {
  templateUrl : "templates/home/home.html"
 }
 }
})
.state("tabs.taobao", {
 url: "/taobao",
 views : {
 "tab-taobao" : {
  templateUrl : "templates/taobao/taobao.html"
 }
 }
})
.state("tabs.user", {
 url: "/user",
 views : {
 "tab-user" : {
  templateUrl : "templates/user/user.html"
 }
 }
})

接著就可以分別在home.html taobao.html user.html 下編寫各個選項卡的內(nèi)容

例如:

home.html

<ion-header-bar class="bar bar-header assertive-bg bar-home">
 <ion-title>首頁</ion-title>
</ion-header-bar>

<ion-view>
 <ion-content>

 <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>

 </ion-content>
</ion-view>

注意：不要將ion-tabs置入一個ion-content元素內(nèi)；它會造成一定的已知CSS錯誤。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript中的事件代理初探
本文僅僅起到一個拋磚引玉的作用，讓大家了解到事件代理的原理而已，jquery中的live和delegate實現(xiàn)要復(fù)雜的多
2014-03-03
JavaScript中的普通函數(shù)與構(gòu)造函數(shù)比較
這篇文章主要介紹了JavaScript中的普通函數(shù)與構(gòu)造函數(shù)比較,需要的朋友可以參考下
2015-04-04
Bootstrap Navbar Component實現(xiàn)響應(yīng)式導(dǎo)航
這篇文章主要介紹了Bootstrap Navbar Component實現(xiàn)響應(yīng)式導(dǎo)航的相關(guān)資料,講解了Bootstrap Navbar應(yīng)用及源碼解析，需要的朋友可以參考下
2016-10-10
JavaScript中報錯Cannot?set?properties?of?undefined?(settin
這篇文章主要介紹了JavaScript中報錯Cannot?set?properties?of?undefined?(setting?'1')的解決方案,文中通過代碼介紹的非常詳細,對大家學(xué)習(xí)或使用js具有一定的參考借鑒價值,需要的朋友可以參考下
2025-03-03
用javascript獲取當頁面上鼠標光標位置和觸發(fā)事件的對象的代碼
用 javascript 獲取當頁面上鼠標（光標）位置和觸發(fā)事件的對象的方法
2009-12-12
基于JavaScript實現(xiàn)一定時間后去執(zhí)行一個函數(shù)
在實際需要中可能需要規(guī)定在指定的時間之后再去執(zhí)行一個函數(shù)以達成期望的目的，這也就是一個定時器效果,本文給大家介紹基于JavaScript實現(xiàn)一定時間后去執(zhí)行一個函數(shù)的相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
深入理解JavaScript中的for循環(huán)
這篇文章主要給大家深入的介紹了JavaScript中的for循環(huán)，其中包括ES5中的三種for循環(huán)，分別是簡單for循環(huán)、for-in以及forEach，另外還詳細介紹了ES6新增的一種循環(huán)：for-of ，有需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
JavaScript的DOM與BOM的區(qū)別與用法詳解
這篇文章主要為大家詳細介紹了JavaScript的DOM與BOM的區(qū)別與用法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
注意 JavaScript 中 RegExp 對象的 test 方法
注意 JavaScript 中 RegExp 對象的 test 方法...
2007-01-01
JavaScript框架設(shè)計模式詳解
這篇文章主要介紹了javascript框架設(shè)計模式,結(jié)合實例形式分析了javascript模板方法模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下
2021-09-09