ionic 導航 · W3School Ionic 教程

# ionic 導航 ## ion-nav-view 當用戶在你的app中瀏覽時，ionic能夠檢測到瀏覽歷史。通過檢測瀏覽歷史，實現向左或向右滑動時可以正確轉換視圖。采用AngularUI路由器模塊等應用程序接口可以分為不同的$state(狀態)。Angular的核心為路由服務，URLs可以用來控制視圖。 AngularUI路由提供了一個更強大的狀態管理，即狀態可以被命名，嵌套，以及合并視圖，允許一個以上模板呈現在同一個頁面。此外，每個狀態無需綁定到一個URL，并且數據可以更靈活地推送到每個狀態。以下實例中，我們將創建一個應用程序中包含不同狀態的導航視圖。我們的標記中選擇ionNavView作為頂層指令。顯示一個頁眉欄我們用 ionNavBar 指令通過導航更新。接下來，我們需要設置我們的將渲染的狀態值。 ``` var app = angular.module('myApp', ['ionic']); app.config(function($stateProvider) { $stateProvider .state('index', { url: '/', templateUrl: 'home.html' }) .state('music', { url: '/music', templateUrl: 'music.html' }); }); ``` 再打開應用，$stateProvider 會查詢url, 看是否匹配 index 狀態值, 再加載index.html到<ion-nav-view>。頁面加載都是通過URLs配置的。在Angular中創建模板最一個簡單的方式就是直接將他放到html模板文件中并且用<script type="text/ng-template"w> 包含。所以這也是一種方式將Home.html加入到我們的APP中來： ``` <script id="home" type="text/ng-template">  <ion-view view-title="Home"> <ion-content ng-controller="HomeCtrl">  <a href="#/music">Go to music page!</a> </ion-content> </ion-view> </script> ``` 這是一個很好的方法，因為模板會很快的加載并被緩存就不同通過網絡再去加載。 ### 緩存通常情況下，視圖都被緩存了能提升性能。當跳出視圖時，他的元素被保留在Dom中，并且它的作用于也從 $watch 中移除。當我們跳到一個已經被緩存了的視圖，視圖會被激活，它的作用于被重新連接上，Dom中也保存了他的元素。這也允許保持以前的視圖滾動位置。緩存也可以通過很多方式來開啟和關閉的。默認Ionic將最大緩存頁面數為10個，并且這并不是唯一可以定制的，應用程序可以顯式狀態來設置視圖應不應該被緩存。注意，因為我們是緩存這些視圖，我們沒有破壞作用于. 相反, 它的作用于也從 $watch 中移除。因為接下來的觀看作用域并沒有被摧毀和重建，控制器也沒被再次加載。如果app/controller需要知道什么時候進入或離開一個視圖，再視圖事件從 ionView 作用內發出, 例如 $ionicView.enter，可能是有用的。 ### 全局禁用緩存 $ionicConfigProvider 可以用于設置最大允許緩存的視圖數量，通過設置為0來禁用所有緩存。 ``` $ionicConfigProvider.views.maxCache(0); ``` ### 在STATE PROVIDER中禁用緩存 ``` $stateProvider.state('myState', { cache: false, url : '/myUrl', templateUrl : 'my-template.html' }) ``` ### 通過屬性禁用緩存 ``` <ion-view cache-view="false" view-title="My Title!"> ... </ion-view> ``` ### AngularUI 路由請訪問?[AngularUI Router's docs](https://github.com/angular-ui/ui-router/wiki)?了解更多。 ### API `name(可選)`：`字符串` 一個視圖的名字。這個名字應該是在相同的狀態下其他視圖中唯一的。你可以在不同的狀態中有相同名稱的視圖。欲了解詳細信息，查看ui-router的 [ui-view 文檔](http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view)。 ## ion-view 隸屬于ionNavView。一個內容的容器，用于展示視圖或導航欄信息。下面是一個帶有"我的頁面"標題的導航欄載入頁面的例子。 ``` <ion-nav-bar></ion-nav-bar> <ion-nav-view class="slide-left-right"> <ion-view title="我的頁面"> <ion-content> 你好! </ion-content> </ion-view> </ion-nav-view> ``` ### API `title(可選)`：`字符串` 顯示在父`ionNavBar`的標題。 `hide-back-button(可選)`：`布爾值` 默認情況下，是否在父`ionNavBar`隱藏后退按鈕。 `hide-nav-bar(可選)`：`布爾值` 默認情況下，是否隱藏父`ionNavBar`。 ## ion-nav-bar 創建一個頂部工具欄，當程序狀態改變時更新。 ### 用法 ``` <body ng-app="starter">  <ion-nav-bar class="bar-positive nav-title-slide-ios7"> </ion-nav-bar>  <ion-nav-view></ion-nav-view> </body> ``` ### API `delegate-handle(可選)`：`字符串` 該句柄用`$ionicNavBarDelegate`標識此導航欄。 `align-title(可選)`：`字符串` 導航欄標題對齊的位置。可用： 'left', 'right', 'center'。默認為 'center'。 ## ion-nav-buttons 隸屬于ionNavView 在ionView內的ionNavBar上用ionNavButtons設置按鈕。你設置的任何按鈕都將被放置在導航欄的相應位置，當用戶離開父視圖時會被銷毀。 ### 用法 ``` <ion-nav-bar> </ion-nav-bar> <ion-nav-view> <ion-view> <ion-nav-buttons side="left"> <button class="button" ng-click="doSomething()"> 我是一個在導航欄左側的按鈕！ </button> </ion-nav-buttons> <ion-content> 這里是一些內容！ </ion-content> </ion-view> </ion-nav-view> ``` ### API `side`：`字符串` 在父`ionNavBar`中按鈕放置的位置。可用: 'left' 或 'right'。 ## ion-nav-back-button 在一個ionNavBar中創建一個按鈕。當用戶在當前導航能夠后退時，將顯示后退按鈕。 ### 用法默認按鈕動作: ``` <ion-nav-bar> <ion-nav-back-button class="button-clear"> <i class="ion-arrow-left-c"></i> 后退 </ion-nav-back-button> </ion-nav-bar> ``` 自定義點擊動作，用 $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(); }; } ``` 在后退按鈕上顯示上一個標題，也用$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一個當點擊視圖上的元素時用到的屬性指令，比如一個 <a href> 或者一個 <button ui-sref>。當點擊時，nav-clear將會導致給定的元素，禁止下一個視圖的轉換。這個指令很有用，比如，側欄菜單內的鏈接。 ### 用法下面是一個側欄菜單內添加了nav-clear指令的一個鏈接。點擊該鏈接將禁用視圖間的任何動畫。 ``` <a nav-clear menu-close href="#/home" class="item">首頁</a> ``` ## ion-nav-title ion-nav-title 用于設置 ion-view 模板中的標題。 ### 用法 ``` <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 設置使用的過渡類型，可以是：ios, android, 和 none。 ### 用法 ``` <a nav-transition="none" href="#/home">Home</a> ``` ## nav-direction 設置導航視圖中過渡動畫的方向，可以是forward, back, enter, exit, swap。 ### 用法 ``` <a nav-direction="forward" href="#/home">Home</a> ``` ## $ionicNavBarDelegate 授權控制 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]) ``` 在瀏覽歷史中后退。 `event(可選)`：`DOMEvent` 事件對象（如來自點擊事件） ``` align([direction]) ``` 帶有按鈕的標題對齊到指定的方向。 `direction(可選)`：`字符串` 標題文字對齊的方向。可用: 'left', 'right', 'center'。默認: 'center'。 **返回值:** 布爾值，后退按鈕是否顯示。 ``` showBar(show) ``` 設置或獲取 ion-nav-bar 是否顯示。 `show`：`布爾值` 導航欄是否顯示。 **返回值:** 布爾值，導航欄是否顯示。 ``` showBackButton([show]) ``` 設置或獲取 ion-nav-back-button 是否顯示。 `show(可選)`：`布爾值` 是否顯示后退按鈕 ``` title(title) ``` 為ion-nav-bar設置標題。 `title`：`字符串` 顯示新標題。 ## $ionicHistory $ionicHistory 用于跟蹤用戶在 app 內的瀏覽記錄。 ### 方法 ``` viewHistory() ``` 用于查看歷史記錄。 ``` currentView() ``` app 的當前視圖。 ``` currentHistoryId() ``` 歷史堆棧的 ID，是當前視圖的父類容器。 ``` currentTitle([val]) ``` 獲取或設置當前視圖的標題。 ``` backView() ``` 返回上次瀏覽的視圖。 ``` backTitle() ``` 獲取上次瀏覽的視圖的標題。 ``` forwardView() ``` 返回歷史堆棧中當前視圖的上一個視圖。 ``` currentStateName() ``` 返回當前狀態名。 ``` goBack([backCount]) ``` app 回退視圖，如果回退的視圖存在。