ionic 导航(二)
【摘要】 ion-nav-bar创建一个顶部工具栏，当程序状态改变时更新。用法<body ng-app="starter"> <!-- 当我们浏览时，导航栏会随之更新。 --> <ion-nav-bar class="bar-positive nav-title-slide-ios7"> </ion-nav-bar> <!-- 初始化时渲染视图模板 --> <ion-nav-view></i...
ion-nav-bar
创建一个顶部工具栏，当程序状态改变时更新。
用法
<body ng-app="starter">
<!-- 当我们浏览时，导航栏会随之更新。 -->
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
</ion-nav-bar>
<!-- 初始化时渲染视图模板 -->
<ion-nav-view></ion-nav-view>
</body>API
| 属性 | 类型 | 详情 |
|---|---|---|
| delegate-handle
(可选)
|
字符串 |
该句柄用 |
| align-title
(可选)
|
字符串 |
导航栏标题对齐的位置。可用： 'left', 'right', 'center'。 默认为 'center'。 |
ion-nav-buttons
隶属于ionNavView
在ionView内的ionNavBar上用ionNavButtons设置按钮。
你设置的任何按钮都将被放置在导航栏的相应位置，当用户离开父视图时会被销毁。
用法
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="left">
<button class="button" ng-click="doSomething()">
我是一个在导航栏左侧的按钮！
</button>
</ion-nav-buttons>
<ion-content>
这里是一些内容！
</ion-content>
</ion-view>
</ion-nav-view>API
| 属性 | 类型 | 详情 |
|---|---|---|
| side | 字符串 |
在父 |
ion-nav-back-button
在一个ionNavBar中创建一个按钮。
当用户在当前导航能够后退时，将显示后退按钮。
用法
默认按钮动作:
<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>
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）