ionic 导航(2)-木庄网络博客

当用户在当前导航能够后退时，将显示后退按钮。

用法

默认按钮动作:

<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 回退视图，如果回退的视图存在。

标签：ionic

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » ionic 导航

ionic 导航

用法