ionic 導(dǎo)航
ion-nav-view
當(dāng)用戶在你的app中瀏覽時(shí),ionic能夠檢測(cè)到瀏覽歷史。通過(guò)檢測(cè)瀏覽歷史,實(shí)現(xiàn)向左或向右滑動(dòng)時(shí)可以正確轉(zhuǎn)換視圖。
采用AngularUI路由器模塊等應(yīng)用程序接口可以分為不同的$state(狀態(tài))。Angular的核心為路由服務(wù),URLs可以用來(lái)控制視圖。
AngularUI路由提供了一個(gè)更強(qiáng)大的狀態(tài)管理,即狀態(tài)可以被命名,嵌套, 以及合并視圖,允許一個(gè)以上模板呈現(xiàn)在同一個(gè)頁(yè)面。
此外,每個(gè)狀態(tài)無(wú)需綁定到一個(gè)URL,并且數(shù)據(jù)可以更靈活地推送到每個(gè)狀態(tài)。
以下實(shí)例中,我們將創(chuàng)建一個(gè)應(yīng)用程序中包含不同狀態(tài)的導(dǎo)航視圖。
我們的標(biāo)記中選擇ionNavView作為頂層指令。顯示一個(gè)頁(yè)眉欄我們用 ionNavBar 指令通過(guò)導(dǎo)航更新。
接下來(lái),我們需要設(shè)置我們的將渲染的狀態(tài)值。var app = angular.module('myApp', ['ionic']); app.config(function($stateProvider) { $stateProvider .state('index', { url: '/', templateUrl: 'home.html' }) .state('music', { url: '/music', templateUrl: 'music.html' }); });
再打開(kāi)應(yīng)用,$stateProvider 會(huì)查詢url, 看是否匹配 index 狀態(tài)值, 再加載index.html到<ion-nav-view>。
頁(yè)面加載都是通過(guò)URLs配置的。在Angular中創(chuàng)建模板最一個(gè)簡(jiǎn)單的方式就是直接將他放到html模板文件中并且用<script type="text/ng-template"w> 包含。所以這也是一種方式將Home.html加入到我們的APP中來(lái):
<script id="home" type="text/ng-template"> <!-- The title of the ion-view will be shown on the navbar --> <ion-view view-title="Home"> <ion-content ng-controller="HomeCtrl"> <!-- The content of the page --> <a href="#/music">Go to music page!</a> </ion-content> </ion-view> </script>
這是一個(gè)很好的方法,因?yàn)槟0鍟?huì)很快的加載并被緩存就不同通過(guò)網(wǎng)絡(luò)再去加載。
緩存
通常情況下,視圖都被緩存了能提升性能。當(dāng)跳出視圖時(shí),他的元素被保留在Dom中,并且它的作用于也從 $watch 中移除。當(dāng)我們跳到一個(gè)已經(jīng)被緩存了的視圖,視圖會(huì)被激活,它的作用于被重新連接上,Dom中也保存了他的元素。這也允許保持以前的視圖滾動(dòng)位置。
緩存也可以通過(guò)很多方式來(lái)開(kāi)啟和關(guān)閉的。默認(rèn)Ionic將最大緩存頁(yè)面數(shù)為10個(gè),并且這并不是唯一可以定制的,應(yīng)用程序可以顯式狀態(tài)來(lái)設(shè)置視圖應(yīng)不應(yīng)該被緩存。
注意,因?yàn)槲覀兪蔷彺孢@些視圖,我們沒(méi)有破壞作用于. 相反, 它的作用于也從 $watch 中移除。
因?yàn)榻酉聛?lái)的觀看作用域并沒(méi)有被摧毀和重建,控制器也沒(méi)被再次加載。如果app/controller需要知道什么時(shí)候進(jìn)入或離開(kāi)一個(gè)視圖,再視圖事件從 ionView 作用內(nèi)發(fā)出, 例如 $ionicView.enter, 可能是有用的。
全局禁用緩存
$ionicConfigProvider 可以用于設(shè)置最大允許緩存的視圖數(shù)量,通過(guò)設(shè)置為0來(lái)禁用所有緩存。
$ionicConfigProvider.views.maxCache(0);
在STATE PROVIDER中禁用緩存
$stateProvider.state('myState', { cache: false, url : '/myUrl', templateUrl : 'my-template.html' })
通過(guò)屬性禁用緩存
<ion-view cache-view="false" view-title="My Title!"> ... </ion-view>
AngularUI 路由
請(qǐng)?jiān)L問(wèn) AngularUI Router's docs 了解更多。
API
屬性 | 類(lèi)型 | 詳情 |
---|---|---|
name
(可選)
|
字符串
|
一個(gè)視圖的名字。這個(gè)名字應(yīng)該是在相同的狀態(tài)下其他視圖中唯一的。你可以在不同的狀態(tài)中有相同名稱(chēng)的視圖。欲了解詳細(xì)信息,查看ui-router的 ui-view 文檔。 |
ion-view
隸屬于ionNavView。 一個(gè)內(nèi)容的容器,用于展示視圖或?qū)Ш綑谛畔ⅰ?/p>
下面是一個(gè)帶有"我的頁(yè)面"標(biāo)題的導(dǎo)航欄載入頁(yè)面的例子。
<ion-nav-bar></ion-nav-bar> <ion-nav-view class="slide-left-right"> <ion-view title="我的頁(yè)面"> <ion-content> 你好! </ion-content> </ion-view> </ion-nav-view>
API
屬性 | 類(lèi)型 | 詳情 |
---|---|---|
title
(可選)
|
字符串
|
顯示在父 |
hide-back-button
(可選)
|
布爾值
|
默認(rèn)情況下,是否在父 |
hide-nav-bar
(可選)
|
布爾值
|
默認(rèn)情況下,是否隱藏父 |
ion-nav-bar
創(chuàng)建一個(gè)頂部工具欄,當(dāng)程序狀態(tài)改變時(shí)更新。
用法
<body ng-app="starter"> <!-- 當(dāng)我們?yōu)g覽時(shí),導(dǎo)航欄會(huì)隨之更新。 --> <ion-nav-bar class="bar-positive nav-title-slide-ios7"> </ion-nav-bar> <!-- 初始化時(shí)渲染視圖模板 --> <ion-nav-view></ion-nav-view> </body>
API
屬性 | 類(lèi)型 | 詳情 |
---|---|---|
delegate-handle
(可選)
|
字符串
|
該句柄用 |
align-title
(可選)
|
字符串
|
導(dǎo)航欄標(biāo)題對(duì)齊的位置??捎茫?'left', 'right', 'center'。 默認(rèn)為 'center'。 |
ion-nav-buttons
隸屬于ionNavView
在ionView內(nèi)的ionNavBar上用ionNavButtons設(shè)置按鈕。
你設(shè)置的任何按鈕都將被放置在導(dǎo)航欄的相應(yīng)位置,當(dāng)用戶離開(kāi)父視圖時(shí)會(huì)被銷(xiāo)毀。
用法
<ion-nav-bar> </ion-nav-bar> <ion-nav-view> <ion-view> <ion-nav-buttons side="left"> <button class="button" ng-click="doSomething()"> 我是一個(gè)在導(dǎo)航欄左側(cè)的按鈕! </button> </ion-nav-buttons> <ion-content> 這里是一些內(nèi)容! </ion-content> </ion-view> </ion-nav-view>
API
屬性 | 類(lèi)型 | 詳情 |
---|---|---|
side |
字符串
|
在父 |
ion-nav-back-button
在一個(gè)ionNavBar中創(chuàng)建一個(gè)按鈕。
當(dāng)用戶在當(dāng)前導(dǎo)航能夠后退時(shí),將顯示后退按鈕。
用法
默認(rèn)按鈕動(dòng)作:
<ion-nav-bar> <ion-nav-back-button class="button-clear"> <i class="ion-arrow-left-c"></i> 后退 </ion-nav-back-button> </ion-nav-bar>
自定義點(diǎn)擊動(dòng)作,用 $ionicNavBarDelegate:
<ion-nav-bar ng-controller="MyCtrl"> <ion-nav-back-button class="button-clear" ng-click="canGoBack && goBack()"> <i class="ion-arrow-left-c"></i> 后退 </ion-nav-back-button> </ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) { $scope.goBack = function() { $ionicNavBarDelegate.back(); }; }
在后退按鈕上顯示上一個(gè)標(biāo)題,也用$ionicNavBarDelegate。
<ion-nav-bar ng-controller="MyCtrl"> <ion-nav-back-button class="button-icon"> <i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}} </ion-nav-back-button> </ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) { $scope.getPreviousTitle = function() { return $ionicNavBarDelegate.getPreviousTitle(); }; }
nav-clear
nav-clear一個(gè)當(dāng)點(diǎn)擊視圖上的元素時(shí)用到的屬性指令,比如一個(gè) <a href> 或者一個(gè) <button ui-sref>。
當(dāng)點(diǎn)擊時(shí),nav-clear將會(huì)導(dǎo)致給定的元素,禁止下一個(gè)視圖的轉(zhuǎn)換。這個(gè)指令很有用,比如,側(cè)欄菜單內(nèi)的鏈接。
用法
下面是一個(gè)側(cè)欄菜單內(nèi)添加了nav-clear指令的一個(gè)鏈接。點(diǎn)擊該鏈接將禁用視圖間的任何動(dòng)畫(huà)。
<a nav-clear menu-close href="#/home" class="item">首頁(yè)</a>
ion-nav-title
ion-nav-title 用于設(shè)置 ion-view 模板中的標(biāo)題。
用法
<ion-nav-bar> </ion-nav-bar> <ion-nav-view> <ion-view> <ion-nav-title> <img src="logo.svg"> </ion-nav-title> <ion-content> Some super content here! </ion-content> </ion-view> </ion-nav-view>
nav-transition
設(shè)置使用的過(guò)渡類(lèi)型,可以是:ios, android, 和 none。
用法
<a nav-transition="none" href="#/home">Home</a>
nav-direction
設(shè)置導(dǎo)航視圖中過(guò)渡動(dòng)畫(huà)的方向,可以是forward, back, enter, exit, swap。
用法
<a nav-direction="forward" href="#/home">Home</a>
$ionicNavBarDelegate
授權(quán)控制 ion-nav-bar 指令。
用法
<body ng-controller="MyCtrl"> <ion-nav-bar> <button ng-click="setNavTitle('banana')"> Set title to banana! </button> </ion-nav-bar> </body>
function MyCtrl($scope, $ionicNavBarDelegate) { $scope.setNavTitle = function(title) { $ionicNavBarDelegate.title(title); } }
方法
align([direction])
在瀏覽歷史中后退。
參數(shù) | 類(lèi)型 | 詳情 |
---|---|---|
event
(可選)
|
DOMEvent
|
事件對(duì)象(如來(lái)自點(diǎn)擊事件) |
align([direction])
帶有按鈕的標(biāo)題對(duì)齊到指定的方向。
參數(shù) | 類(lèi)型 | 詳情 |
---|---|---|
direction
(可選)
|
字符串
|
標(biāo)題文字對(duì)齊的方向。可用: 'left', 'right', 'center'。 默認(rèn): 'center'。 |
返回值: 布爾值, 后退按鈕是否顯示。
showBar(show)
設(shè)置或獲取 ion-nav-bar 是否顯示。
參數(shù) | 類(lèi)型 | 詳情 |
---|---|---|
show |
布爾值
|
導(dǎo)航欄是否顯示。 |
返回值: 布爾值, 導(dǎo)航欄是否顯示。
showBackButton([show])
設(shè)置或獲取 ion-nav-back-button 是否顯示。
參數(shù) | 類(lèi)型 | 詳情 |
---|---|---|
show
(可選)
|
布爾值
|
是否顯示后退按鈕 |
title(title)
為ion-nav-bar設(shè)置標(biāo)題。
參數(shù) | 類(lèi)型 | 詳情 |
---|---|---|
title |
字符串
|
顯示新標(biāo)題。 |
$ionicHistory
$ionicHistory 用于跟蹤用戶在 app 內(nèi)的瀏覽記錄。
方法
viewHistory()
用于查看歷史記錄。
currentView()
app 的當(dāng)前視圖。
currentHistoryId()歷史堆棧的 ID,是當(dāng)前視圖的父類(lèi)容器。
currentTitle([val])
獲取或設(shè)置當(dāng)前視圖的標(biāo)題。
backView()
返回上次瀏覽的視圖。
backTitle()
獲取上次瀏覽的視圖的標(biāo)題。
forwardView()
返回歷史堆棧中當(dāng)前視圖的上一個(gè)視圖。
currentStateName()
返回當(dāng)前狀態(tài)名。
goBack([backCount])
app 回退視圖,如果回退的視圖存在。
更多建議: