ionic 导航(二)

举报
MICAR 发表于 2021/04/13 14:15:36 2021/04/13
【摘要】 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
(可选)
字符串

该句柄用$ionicNavBarDelegate标识此导航栏。

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 字符串

在父ionNavBar中按钮放置的位置。 可用: 'left' 或 'right'。


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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200