Ionic - Javascript 导航

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

使用导航

导航可以在 app.js 文件中配置。如果您使用的是 Ionic 模板之一，您会注意到 $stateProvider 服务被注入到应用的 config 中。为应用创建 state 的最简单方法如下例所示。

$stateProvider 服务会扫描 URL，找到对应的 state 并加载我们在 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',});
});

state 将被加载到 ion-nav-view 元素中，该元素可以放置在 index.html 的 body 中。

index.html 代码

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

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

state1.html 代码

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

创建导航菜单

您可以通过在 index.html 的 body 中添加 ion-nav-bar 元素来为应用添加导航栏。在导航栏内部，我们将添加带有图标的 ion-nav-back-button。这将用于返回到上一个 state。当 state 更改时，按钮会自动出现。我们将分配 goBack() 函数，该函数使用 $ionicHistory 服务来处理此功能。因此，当用户离开 home state 并转到 state1 时，后退按钮将出现，用户可以点击它返回到 home state。

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>

Controller 代码

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

添加导航元素

可以使用 ion-nav-buttons 将按钮添加到导航栏中。此元素应放置在 ion-nav-bar 或 ion-view 内部。我们可以为 side 属性分配四个选项值。primary 和 secondary 值将根据使用的平台放置按钮。有时无论使用 iOS 还是 Android，您都希望按钮在一侧。如果是这样，您可以使用 left 或 right 属性代替。

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

<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 导航一起使用的其他功能。

导航属性

缓存

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 服务来控制导航栏的行为。此服务需要注入到我们的 controller 中。

HTML 代码

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

Controller 代码

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

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

$ionicNavBarDelegate 的方法

跟踪历史记录

您可以使用 $ionicHistory 服务跟踪前一个、当前和前进视图的历史记录。以下表格显示了此服务的所有方法。

$ionicHistory 的方法

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

• disableAnimate 用于禁用下一个视图变化的动画。

• disableBack 将后退视图设置为 null。

• historyRoot 将下一个视图设置为根视图。

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