Ionic Javascript导航


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

使用导航

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

$ stateProvider 服务将扫描的网址,找到相应的状态和加载该文件,这是我们所定义的 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 ,因此在加载状态时,它将搜索匹配模板文件。现在,我们将打开 模板 文件夹并创建一个新文件 state1.html ,当应用程序URL更改为 / state1 时将加载该文件。

state1.html代码

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

Ionic导航状态

创建导航菜单

您可以通过添加 “ion-nav-bar” 元素在 index.html 主体中为您的应用添加 导航栏。在导航栏中,我们将添加带有图标的 Ionic导航后退按钮 。这将用于返回先前的状态。状态更改后,该按钮将自动出现。我们将分配 goBack() 函数,该函数将使用 $ ionicHistory 服务来处理此功能。因此,当用户离开家庭状态并进入 state1 时,如果用户想要返回到家庭状态,则会出现可以录音的后退按钮。

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();
   };
}

Ionic导航后退按钮

添加导航元素

可以使用 Ionic导航按钮将按钮 添加到导航栏。该元素应放置在 Ionic导航条Ionic视图内 。我们可以为 side 属性分配四个选项值。所述 初级次级 值将根据所使用的平台放置的按钮。有时你想要一边的按钮,无论是IOS还是Android。如果是这种情况,则可以使用 左侧右侧 属性。

我们还可以将 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导航元素

其他导航属性

下表显示了一些其他功能,可用于Ionic导航。

导航属性

Attribute Options Detail
nav-transition none, iOS, Android 用于设置转换发生时应应用的动画。
nav-direction forward, back, enter, exit, swap 用于在发生转换时设置动画的方向。
hardwareBackButtonClose Boolean 单击硬件后退按钮时,它将启用关闭模态。默认值为true。

高速缓存

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

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

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的方法

Method Parameter Type Detail
align(parameter) center, left, right string 用于对齐标题。
showBackButton(parameter) show Boolean 用于显示或隐藏后退按钮。
title(parameter) title string 用于显示新标题。

跟踪历史

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

$ ionicHistory的方法

Method Parameter Type Detail
viewHistory / object 返回应用视图历史数据。
currentView() / object 返回当前视图。
title(parameter) title string 返回视图的ID,该视图是当前视图的父视图。
currentTitle(parameter) val string 返回当前视图的标题。可以通过设置新的val值来更新它。 val value.
backView() / string 返回最后一个后视图。
backTitle() / string 返回最后一个后视图的标题。
forwardView() / object 返回最后一个前向视图。
currentStateName() / string 返回当前状态名称。
goBack() backCount number 用于设置要返回的视图数。数字应为负数。如果是正数或零,则无效。
clearHistory() / / 用于清除整个视图历史记录。 .
clearCache() / promise 用于清除所有缓存的视图。
nextViewOptions() / object 设置下一个视图的选项。您可以查看以下示例以获取更多信息。

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

  • disableAnimate 用于禁用下一个视图更改的动画。

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

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

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