<navbar>

[[toc]]

导航栏有4个主要部分：返回按钮、左侧、标题和右侧。每个部分可能包含任何内容，但建议按以下方式使用它们：

  • 返回按钮部分被设计为“后退链接”。
  • 左侧部分被设计为显示在左边的内容（主要用于自定义“后退连接”）。
  • 标题部分用于显示页面标题或标签链接（按钮行/分段控制器）。
  • 右半部分被设计为显示在右边的内容。

子组件

仅支持子组件<navbar-item>详细请看 这里

预览效果

&lt;navbar&gt; - 图1

示例代码

  1. <template>
  2.     <div>
  4.         <!--样式①-->
  5.         <navbar class="navbar">
  7.             <navbar-item type="back"></navbar-item>
  9.             <navbar-item type="title">
  10.                 <text class="text">标题</text>
  11.             </navbar-item>
  13.         </navbar>
  15.         <!--样式②-->
  16.         <navbar class="navbarb" titleType="left">
  18.             <navbar-item type="back"></navbar-item>
  20.             <navbar-item type="title">
  21.                 <text class="text">标题</text>
  22.             </navbar-item>
  24.         </navbar>
  26.         <!--样式③-->
  27.         <navbar class="navbarb">
  29.             <navbar-item type="back"></navbar-item>
  31.             <navbar-item type="title">
  32.                 <text class="text">标题</text>
  33.             </navbar-item>
  35.             <navbar-item type="right">
  36.                 <icon content="md-refresh" class="icon"></icon>
  37.             </navbar-item>
  39.         </navbar>
  41.         <!--样式④-->
  42.         <navbar class="navbarc">
  44.             <navbar-item type="left">
  45.                 <icon content="md-arrow-back" class="icon"></icon>
  46.             </navbar-item>
  48.             <navbar-item type="title">
  49.                 <text class="text">标题</text>
  50.             </navbar-item>
  52.             <navbar-item type="right">
  53.                 <icon content="md-refresh" class="icon"></icon>
  54.             </navbar-item>
  56.         </navbar>
  58.         <!--样式⑤-->
  59.         <navbar class="navbarc">
  61.             <!--返回按钮-->
  62.             <navbar-item type="back"></navbar-item>
  64.             <!--左边内容-->
  65.             <navbar-item type="left">
  66.                 <text class="text">左边内容</text>
  67.             </navbar-item>
  69.             <!--中间内容(标题内容)-->
  70.             <navbar-item type="title">
  71.                 <text class="text">中间(标题)内容</text>
  72.             </navbar-item>
  74.             <!--右边内容-->
  75.             <navbar-item type="right">
  76.                 <text class="text">右边内容</text>
  77.             </navbar-item>
  79.         </navbar>
  81.     </div>
  82. </template>
  84. <style>
  85.     .navbar {
  86.         width: 750px;
  87.         height: 100px;
  88.         margin-bottom: 50px;
  89.     }
  90.     .navbarb {
  91.         width: 750px;
  92.         height: 100px;
  93.         margin-bottom: 50px;
  94.     }
  95.     .navbarc {
  96.         width: 750px;
  97.         height: 100px;
  98.         margin-bottom: 50px;
  99.         background-color: #FF5001;
  100.     }
  101.     .icon {
  102.         width: 100px;
  103.         height: 100px;
  104.     }
  105.     .text {
  106.         font-size: 26px;
  107.     }
  108. </style>

配置参数

属性名 类型 描述 默认值
titleType String 标题对齐方式，left、right、middle middle

例如：

  1. <navbar 
  2.     ref="reflectName"
  3.     class="navbar" 
  4.     titleType="left"></navbar>

事件回调 callback

  1. /**
  2.  * 组件加载完成
  3.  */
  4. @ready = function() { ... }
  6. /**
  7.  * 子组件`<navbar-item type="back">`的返回事件
  8.  */
  9. @goBack = function() { ... }

调用方法 methods

  1. /**
  2.  * 显示返回按钮
  3.  */
  4. this.$refs.reflectName.showBack();
  6. /**
  7.  * 隐藏返回按钮
  8.  */
  9. this.$refs.reflectName.hideBack();

navbar-item

支持放置任何组件作为自己的子组件（除配置参数type="back"不支持以外）。

navbar-item 示例代码

  1. <navbar-item type="title">
  2.     <text>标题</text>
  3. </navbar-item>

navbar-item.type 配置参数

说明：子组件类型；数据格式：字符串。

类型 描述 默认值
String 所属类型 ，详见：注① title

注意：type='back'类型不支持子组件

注①：

  • back返回按钮
  • left左边内容
  • title标题内容
  • right右边内容

例如：

  1. <navbar-item type="title">
  2.     .....
  3. </navbar-item>
  1. <navbar-item type="back"></navbar-item>