标签：ionic
4. 导航视图 : ion-nav-view
在 ionic 里，我们使用 ion-nav-view 指令代替 AngularUI Route 中的 ui-view 指令，来
进行模板的渲染：
<ion-nav-view>
<!--模板内容将被插入此处-->
</ion-nav-view>
和 ui-view 一样，ion-nav-view 总是根据状态的变化，来提取对应的模板 并将其在 DOM 树
中渲染。
5.模板视图 : ion-view
尽管在模板视图中可以随便写 HTML，但是，在 ionic 中，我们总是使用指令 ion-view 来 作
为模板视图内容的容器，这是为了与 ionic 的导航框架保持兼容：
<script id="..." type="text/ng-template">
<ion-view>
<!--模板视图内容-->
</ion-view>
</script>
ion-view 指令有一些可选的属性：
· view-title - 视图标题文字
模板被载入导航视图 ion-nav-view 显示时，这个属性值将显示在导航栏 ion-nav-bar 中
· cache-view - 是否对这个模板视图进行缓存
允许值为： true | false，默认为 true
· hide-back-button -是否隐藏导航栏中的返回按钮
当模板被载入导航视图时，如果之前有其他的模板，那么在导航栏 ion-nav-bar 上默认会自
动 显示返回按钮（使用指令 ion-nav-back-button 定义）。点击该按钮将返回前一个模板。
hide-back-button 的允许值为： true | false ，默认为 false
注意：必须在导航栏中显式地声明返回按钮，否则即使将 hide-back-button 属性设为 false，
这个按钮也不会出现:-)
· hide-nav-bar - 是否隐藏导航栏
允许值为： true | false ,默认为 false
6. 导航栏 : ion-nav-bar
ion-nav-bar 指令用来声明一个居于屏幕顶端的导航栏，它的内容随导航视图 的状态变化
而自动同步变化：
<ion-nav-bar></ion-nav-bar>
ion-nav-bar 有以下可选的属性：
· align-title - 标题对齐方式
允许值为： left | right | center。默认为center，居中对齐
· no-tap-scroll - 点击导航栏时是否将内容滚动到顶部。
允许值为： true | false。默认为 true，这意味着如果视图中的内容下拉很长，那么在任
何时刻 点击导航栏都可以立刻回到内容的开头部分。
7. 回退按钮 : ion-nav-back-button
ionic 的指令 ion-nav-back-button 指令可以自动地让你回退到前一个视图：
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
当视图切换时，回退按钮会自动出现在导航条中，并显示前一个视图 的标题。点击回退按
钮将返回前一个视图。
ion-nav-back-button 定制样式
我们可以定制回退按钮的图标、文本和样式：
<ion-nav-back-button>
<i class="icon ion-ios-arrow-back"></i> 返回
</ion-nav-back-button>
8. 视图特定按钮 : ion-nav-buttons
在 ionic 的导航框架中，导航栏是公共资源。那么，如果我们需要在不同的 状态下（即载
入不同的模板视图），在导航栏上显示一些不同的按钮，该怎么办？
答案是，在 ion-view 指令声明的元素内使用ion-nav-buttons 指令 添加一组按钮， ionic
的导航框架看到这个指令时，就会自动地将这些按钮 安置到导航栏中。
指令 ion-nav-buttons 必须是指令ion-view 的直接后代：
<ion-view>
<ion-nav-buttons>
<!--按钮定义-->
</ion-nav-buttons>
</ion-view>
ion-nav-buttons 指令有一个属性用于声明这些按钮在导航栏中的位置：
· side - 在导航条的那一侧放置按钮。允许值： primary | secondary |left | right
primary 和 secondary 是平台相关的。比如在iOS 上， primary 被映射到左边，而secondary
被映射到最右边，但是在 Android 上， primary 和 secondary 都在最右侧。
left 和 right 则明确地声明是在左侧还是右侧，与平台无关。
9. 定制标题内容 : ion-nav-title
导航栏中默认显示所载入模板视图的 view-title 属性值，但 ionic 允许我们使用
ion-nav-title 指令，使用任意的 HTML 片段改变它！
ion-nav-title 必须是 ion-view 的直接后代：
<ion-view>
<ion-nav-title>
<!--HTML 片段-->
</ion-nav-title>
</ion-view>
10. 定制视图切换方式 : nav-transition
视图切换时的动画转场方式，可以使用 nav-transition 指令声明：
1. <any ui-sref=".."nav-transition="..">...</any>
目前支持的转场方式有三种：
· android - android 模拟
· ios - ios 模拟
· none - 取消转场动画
11. 定制视图切换方向 : nav-direction
使用 nav-direction 指令声明视图转场时的切换方向：
1. <any ui-sref=".." nav-direction="..">...</any>
目前支持的选项有：
· forward - 新视图从右向左进入
· back - 新视图从左向右进入
· enter -
· exit -
· swap -
12.导航栏脚本接口 : $ionicNavBarDelegate
服务$ionicNavBarDelegate 提供了控制导航栏的脚本接口：
· align([direction]) - 标题对齐方式。
参数 direction 是可选的，允许值为： left |right | center，缺省值为 center。
· showBackButton([show]) - 是否显示回退按钮
参数 show 是可选的，允许值为： true | false，缺省值为 true。
· showBar(show) - 是否显示导航栏
参数 show 的允许值为： true | false 。
· title(title) - 设置导航栏标题
参数 title 为 HTML 字符串。
13.访问历史 : $ionicHistory
ionic 的导航框架会自动维护用户的访问历史栈，我们可以通过服务$ionicHistory 管理访
问轨迹：
· viewHistory() - 返回视图访问历史数据
· currentView() - 返回当前视图对象
· currentHistoryId() - 返回历史 ID
· currentTitle([val]) - 设置或读取当前视图的标题
参数 val 是可选的。无参数调用 currentTile()方法则返回当前视图的标题。
· backView() - 返回历史栈中前一个视图对象
如果从视图 A 导航到视图 B，那么视图 A 就是视图 B 的前一个视图对象。
· backTitle() - 返回历史栈中前一个视图的标题
· forwardView() - 返回历史栈中的下一个视图对象
· currentStateName() - 返回当前所处状态名
· goBack() - 切换到历史栈中前一个视图
当然，前提是存在前一个视图。
· clearHistory() - 请空历史栈
除了当前的视图记录， clearHistory()将清空应用的全部访问历史
交流QQ群：187269144
QQ群2：438443293
QQ群3：248403526
本文出自 “wennuanyiran” 博客，请务必保留此出处http://dingzhaoqiang.blog.51cto.com/5601059/1708104
标签：ionic
原文地址：http://dingzhaoqiang.blog.51cto.com/5601059/1708104
