导航标题栏

需要加载的模块

  1. const navigationBar = app.requireModule('navigationBar');

navigationBar.setTitle

  • 设置页面标题
  1. /**
  2.  * @param params    详细参数
  3.  * @param callback  点击标题回调事件，result回调内容为params传入参数
  4.  */
  5. navigationBar.setTitle({params}, callback(result))

params 参数说明

属性名 类型 必须 描述 默认值
title String √ 标题 -
titleColor String - 标题字体颜色 -
titleSize Float - 标题字体大小 32.0
titleBold Boolean - 标题粗体 false
subtitle String - 副标题 -
subtitleColor String - 副标题字体颜色 -
subtitleSize Float - 副标题字体大小 24.0
backgroundColor String - 标题栏背景颜色 #3EB4FF
barHeight Number - 标题栏高度 -

navigationBar.setLeftItem

  • 设置标题栏左边按钮
  1. /**
  2.  * @param params    详细参数
  3.  * @param callback  点击按钮回调事件，result回调内容为params传入参数
  4.  */
  5. navigationBar.setLeftItem({params}, callback(result))

params 参数说明

属性名 类型 必须 描述 默认值
title String - 按钮标题（与图标必须一） -
titleColor String - 按钮标题字体颜色 -
titleSize Float - 按钮标题字体大小 28.0
titleBold Boolean - 按钮标题粗体 false
icon String - 按钮图标，注① -
iconColor String - 按钮图标字体颜色 -
iconSize Float - 按钮图标字体大小（图标大小） 28.0
width Number - 按钮宽度，留空自适应 -
spacing Number - 按钮标题与按钮图标间距 10

注①：

  • 支持字体图标，如：md-add、ios-cube，更多图标代码详见eeui所有图标。
  • 支持远程图片地址，如：https://eeui.app/app/demo.png，此时不支持iconColor参数。

简单示例

  1. //示例: 纯文字
  2. navigationBar.setLeftItem({
  3.     title: '按钮1',
  4. }, function(result) {
  5.     //....
  6. });

综合示例

  1. <template>
  2.     <div class="app">
  3.         <text class="text">EEUI 菜单栏演示</text>
  4.     </div>
  5. </template>
  7. <script>
  8.     const eeui = app.requireModule('eeui');
  9.     const navigationBar = app.requireModule('navigationBar');
  11.     export default {
  12.         mounted() {
  13.             //示例: 图标+文字
  14.             navigationBar.setLeftItem({
  15.                 icon: 'tb-back',
  16.                 title: '返回',
  17.                 width: 120,
  18.             }, function(result) {
  19.                 eeui.closePage();
  20.             });
  22.             //示例: 多个按钮模式
  23.             navigationBar.setRightItem([{
  24.                 icon: 'md-help-circle-outline',
  25.                 iconSize: 32,
  26.                 title: '按钮1',
  27.             }, {
  28.                 title: '按钮2',
  29.                 width: 120,
  30.             }], function(result) {
  31.                 eeui.alert("点击按钮：" + result.title);
  32.             });
  33.         },
  34.     }
  35. </script>
  37. <style scoped>
  38.     .app {
  39.         flex: 1;
  40.         justify-content: center;
  41.         align-items: center;
  42.     }
  43.     .text {
  44.         font-size: 24px;
  45.     }
  46. </style>

navigationBar.setRightItem

  • 设置标题栏右边按钮，调用参数同见navigationBar.setLeftItem。

navigationBar.show

  • 手动显示标题栏，使用navigationBar.setTitle方法时自动显示标题栏。

navigationBar.hide

  • 手动隐藏标题栏。