Ionic - JavaScript 导航

导航是每个应用程序的核心组件之一。Ionic 使用AngularJS UI Router来处理导航。

使用导航

可以在app.js文件中配置导航。如果您使用 Ionic 模板之一，您会注意到$stateProvider服务已注入到应用程序配置中。以下示例显示了为应用程序创建状态的最简单方法。

$stateProvider服务将扫描 URL，找到相应的状态并加载我们在app.config中定义的文件。

app.js 代码

.config(function($stateProvider) {
   $stateProvider
   .state('index', { url: '/', templateUrl: 'templates/home.html'})
   .state('state1', {url: '/state1', templateUrl: 'templates/state1.html'})
   .state('state2', {url: '/state2', templateUrl: 'templates/state2.html',});
});

状态将加载到ion-nav-view元素中，该元素可以放置在index.html正文中。

index.html 代码

<ion-nav-view></ion-nav-view>

当我们在上述示例中创建状态时，我们使用了 templateUrl ，因此当加载状态时，它将搜索匹配的模板文件。现在，我们将打开templates文件夹并创建一个新文件state1.html，当应用程序 URL 更改为/state1时将加载该文件。

state1.html 代码

<ion-view>
   <ion-content>
      This is State 1 !!!
   </ion-content>
</ion-view>

创建导航菜单

您可以通过添加“ion-nav-bar”元素，在index.html正文中向应用程序添加导航栏。在导航栏中，我们将添加带有图标的ion-nav-back-button 。这将用于返回到之前的状态。当状态改变时该按钮会自动出现。我们将分配goBack()函数，该函数将使用$ionicHistory服务来处理此功能。因此，当用户离开主状态并进入状态1时，将出现后退按钮，如果用户想要返回到主状态，则可以点击该按钮。

index.html 代码

<ion-nav-bar class = "bar-positive">
   <ion-nav-back-button class = "button-clear" ng-click = "goBack()">
      <i class = "icon ion-arrow-left-c"></i> Back
   </ion-nav-back-button>
</ion-nav-bar>

控制器代码

.MyCtrl($scope, $ionicHistory) {
   $scope.goBack = function() {
      $ionicHistory.goBack();
   };
}

添加导航元素

可以使用ion-nav-buttons将按钮添加到导航栏。该元素应放置在ion-nav-bar或ion-view内。我们可以为side属性分配四个选项值。主要值和次要值将根据所使用的平台放置按钮。有时你希望按钮位于一侧，无论是 IOS 还是 Android。如果是这种情况，您可以使用left或right属性来代替。

我们还可以将ion-nav-title添加到导航栏。所有代码都将放在index.html主体中，因此可以在任何地方使用。

<ion-nav-bar class = "bar-positive">
   <ion-nav-title>
      Title
   </ion-nav-title>
	
   <ion-nav-buttons side = "primary">
      <button class = "button">
         Button 1
      </button>
   </ion-nav-buttons>
</ion-nav-bar>

它将产生以下屏幕 -

其他导航属性

下表显示了一些可与 Ionic 导航一起使用的其他功能。

导航属性

属性	选项	细节
导航转换	无、iOS、Android	用于设置发生转换时应应用的动画。
导航方向	前进、后退、进入、退出、交换	用于设置过渡发生时动画的方向。
硬件后退按钮关闭	布尔值	单击硬件后退按钮时，它将启用关闭模式。默认值为 true。

缓存

Ionic 能够缓存最多十个视图以提高性能。它还提供了一种手动处理缓存的方法。由于仅缓存后向视图，并且每次用户访问前向视图时都会加载前向视图，因此我们可以使用以下代码轻松设置为缓存前向视图。

$ionicCinfigProvider.views.forwardCache(true);

我们还可以设置应该缓存多少个状态。如果我们想要缓存三个视图，我们可以使用下面的代码。

$ionicConfigProvider.views.maxCache(3);

可以在$stateProvider内部或通过将属性设置为ion-view来禁用缓存。这两个例子如下。

$stateProvider.state('state1', {
   cache: false,
   url : '/state1',
   templateUrl: 'templates/state1.html'
})

<ion-view cache-view = "false"></ion-view>

控制导航栏

我们可以使用$ionicNavBarDelegate服务来控制导航栏的Behave。该服务需要注入到我们的控制器中。

HTML 代码

<ion-nav-bar>
   <button ng-click = "setNavTitle('title')">
      Set title to banana!
   </button>
</ion-nav-bar>

控制器代码

$scope.setNavTitle = function(title) {
   $ionicNavBarDelegate.title(title);
}

$ionicNavBarDelegate服务还有其他有用的方法。下表列出了其中一些方法。

$ionicNavBarDelegate 的方法

方法	范围	类型	细节
对齐（参数）	中心、左、右	细绳	用于对齐标题。
显示返回按钮（参数）	展示	布尔值	用于显示或隐藏后退按钮。
标题（参数）	标题	细绳	用于显示新标题。

追踪历史记录

您可以使用$ionicHistory服务跟踪先前、当前和转发视图的历史记录。下表显示了该服务的所有方法。

$ionicHistory 的方法

方法	范围	类型	细节
查看历史记录	/	目的	返回应用程序查看历史记录数据。
目前来看（）	/	目的	返回当前视图。
标题（参数）	标题	细绳	返回当前视图的父视图的 ID。
当前标题（参数）	瓦尔	细绳	返回当前视图的标题。可以通过设置新的val值来更新它。
后视图（）	/	细绳	返回最后一个后视图。
返回标题()	/	细绳	返回最后一个后视图的标题。
前向视图()	/	目的	返回最后一个前向视图。
当前状态名称()	/	细绳	返回当前状态名称。
回去（）	回溯计数	数字	用于设置返回多少视图。数字应该是负数。如果它是正数或零，则不会产生任何影响。
清除历史记录（）	/	/	用于清除整个查看历史记录。
清除缓存（）	/	承诺	用于清除所有缓存的视图。
下一个视图选项()	/	目的	设置下一个视图的选项。您可以查看以下示例以获取更多信息。

nextViewOptions ()方法有以下三个可用选项。

disableAnimate用于禁用下一个视图更改的动画。
disableBack会将后视图设置为空。
HistoryRoot会将下一个视图设置为根视图。

$ionicHistory.nextViewOptions({
   disableAnimate: true,
   disableBack: true
});