【Ionic】 <ion-navbar>标签的用法；

最新推荐文章于 2019-11-09 21:16:18 发布

陶洲川

最新推荐文章于 2019-11-09 21:16:18 发布

阅读量5.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：【基础】文章标签： ion-nav-bar ionic ionicNavBarDelegate ionNavView bar

本文链接：https://blog.youkuaiyun.com/River_Continent/article/details/73088196

【基础】专栏收录该内容

229 篇文章

订阅专栏

本文介绍Ionic框架中的ion-nav-bar组件，解释如何创建响应应用状态变化的顶部导航栏，并通过ionNavBackButton和ionNavButtons添加按钮。同时提供使用示例及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ion-nav-bar

Directive in module ionic （ionic 组件的指令）

ion-nav-bar

Delegate(代表，委派)：$ionicNavBarDelegate

If we have an ionNavView directive, we can also create an <ion-nav-bar>, which will create a topbar that updates as the application state changes.
如果我们有一个ionNavView 指令，我们可以还创建一个<ion-nav-bar>,这个可以创建一个作为应用程序状态变化的更新的topbar；

We can add a back button by putting an ionNavBackButton inside.
我们可以通过在里面放置一个ionNavBackButton来添加一个back button；

We can add buttons depending on the currently visible view using ionNavButtons.
我们可以通过使用ionNavButtons来添加一个依赖目前的可视化view的button按钮；

Note that the ion-nav-bar element will only work correctly if your content has an ionView around it.
注意：ion-nav-bar元素只会当你的content目录有一个ionView在里面才会工作；

Usage

<body ng-app="starter">

<ion-nav-bar class="bar-positive">
</ion-nav-bar>


<ion-nav-view>
<ion-view>
<ion-content>Hello!</ion-content>
</ion-view>
</ion-nav-view>
</body>

API

Attr TypeDetails
delegate-handle string The handle used to identify this navBar with $ionicNavBarDelegate.
(optional) handle处理器习惯用$ionicNavBarDelegate来验证navBar

align-title string Where to align the title of the navbar. Available: 'left', 'right', 'center'. Defaults to 'center'.
(optional) 在哪里匹配navbar的title标题；可选项：left，right，center；默认center

no-tap-scroll boolean By default, the navbar will scroll the content to the top when tapped. Set no-tap-scroll to true to disable thisbehavior.
(optional) 默认情况下，navbar在拔出时，将在top顶端卷起content目录。设置no-tap-scroll为true来禁止这个行为；

官方文档地址

目录截图：

接下来是说人话环节：

1、如果有ionNavView指令：可以创建<ion-nav-bar>标签，这是一个顶部工具栏，当程序状态改变时候更新；

2、我们可在这里面加入一个ionNavBackButton按钮来后退；

3、用ionNavButton根据当前可用的视图添加按钮；在一个元素上指定一个动画类，来启动更换标题的动画（建议：‘nav-title-slide-ios7’）

用法：

<body ng-app="starter">
  <!-- 当我们浏览时，导航栏会随之更新。 -->
  <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- 初始化时渲染视图模板 -->
  <ion-nav-view></ion-nav-view>
</body>

其他用法

除此之外，你可以将ion-nav-bar放到每个单独视图的ion-view元素里面。它允许你把整个导航栏，而不仅是它的内容，改变每个视图的过渡。

这类似于把header栏嵌入到你的ion-view中，此外它有导航栏的所有功能。

如果你这样做，只需把导航按钮放在导航栏里面；而不需要用<ion-nav-buttons>。

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
    返回
  </ion-nav-back-button>
  <div class="buttons right-buttons">
    <button class="button">
      右侧按钮
    </button>
  </div>
</ion-nav-bar>
<ion-view title="我的标题">
</ion-view>

中文官方文档