# 3.1 标题栏（Mini bar）

位于 app 内容区的上方，系统状态栏的下方，并且提供在一系列页面中的导航能力。

# 设计原则

1、可在导航栏中显示当前视图的标题；
2、标题长度适配：如果标题非常冗长且无法精简，可以以“…”结尾，表示未显示完全；标题两边与图标或功能文字留一定距离；
3、导航栏避免过多元素。一般情况下，一个“返回按钮”、一个“标题”；
4、导航栏中右侧包含 4 种情况：无、1个图标（功能入口）、2个图标（功能入口）、文字（功能入口）；
5、为图标和文字控件，提供更大的点击热区。

# dof-minibar 顶部导航栏组件

顶部导航栏组件

# 实例

# 规则

  • 优先使用 Native 自带的 Navigator Bar
  • 假如你想隐藏左边返回按钮，直接传入leftButton=""即可

# 基础用法

<template>
  <div class="dof-demo">
    <dof-minibar :left-button="leftButton" title="导航栏" text-color="#ffffff" background-color="#267AFF">
    </dof-minibar>
    <scroller class="scroller">
      <title title="dof-minibar"></title>
      <dof-catalog title="基础样式" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <div>
        <div class="demo">
          <dof-minibar title="标题" @dofMinibarRightButtonClicked="rightButtonClickedHandler"></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar
            title="标题标题标题标题标题标题标题标题标题标题标题标题"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar @dofMinibarRightButtonClicked="rightButtonClickedHandler" :right-button="moreIcon"></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar
            title="标题标题标题标题标题标题标题标题标题标题标题标题"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
            :right-button="moreIcon"
          ></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar right-text="选择" @dofMinibarRightButtonClicked="rightButtonClickedHandler"></dof-minibar>
        </div>

        <div class="demo">
          <dof-minibar
            title="标题标题标题标题标题标题标题标题标题标题标题标题"
            right-text="选择"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
        <dof-catalog title="带副标题" background-color="#daf9ca" :has-margin="true"></dof-catalog>
        <div class="demo">
          <dof-minibar
            title="家电安装"
            sub-title="2台设备"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar
            title="家电安装"
            sub-title="2台设备"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
            :right-button="moreIcon"
          >
          </dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar
            title="家电安装家电安装家电安装家电安装家电安装家电安装"
            sub-title="2台设备"
            right-text="选择"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
        <div class="demo">
          <dof-minibar
            title="家电安装家电安装家电安装家电安装家电安装家电安装"
            sub-title="2台设备"
            :right-button="shareIcon"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
        <dof-catalog title="全部自定义化" background-color="#daf9ca" :has-margin="true"></dof-catalog>
        <div class="demo">
          <dof-minibar
            :left-button="leftButton"
            title="标题"
            right-text="选择"
            text-color="#ffffff"
            background-color="#000000"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>

        <div class="demo">
          <dof-minibar
            :left-button="leftButton"
            title="标题"
            right-text="选择"
            text-color="#ffffff"
            background-color="#267AFF"
            @dofMinibarRightButtonClicked="rightButtonClickedHandler"
          ></dof-minibar>
        </div>
      </div>
      <div class="demo">
        <dof-minibar
          background-color="#267AFF"
          @dofMinibarLeftButtonClicked="minibarLeftButtonClick"
          @dofMinibarRightButtonClicked="minibarRightButtonClick"
        >
          <image
            src="http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png"
            slot="left"
            style="width: 58px;height: 58px;"
          ></image>
          <div class="middle-title" slot="middle">
            <text style="font-size: 32px;color:#ffffff;">全部自定义化</text>
          </div>
          <image
            slot="right"
            src="http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_help_white@3x.png"
            style="width: 58px;height: 58px;"
          ></image>
        </dof-minibar>
      </div>
      <dof-catalog title="无障碍示例" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <div class="demo">
        <dof-minibar title="无障碍标题">
          <div slot="right" aria-label="更多。按钮">
            <!-- 新增@click，image标签会语音成"xx按钮" -->
            <image :src="moreIcon" style="height: 48px;width: 48px;" @click="showPop" aria-label="更多"></image>
          </div>
        </dof-minibar>
      </div>
      <div class="h-100"></div>
    </scroller>
  </div>
</template>

<style scoped>
.dof-demo {
  background-color: #f9f9f9;
}

.right-img-wrapper {
  padding: 15px 15px;
}

.scroller {
  flex: 1;
}

.demo {
  width: 750px;
  height: 180px;
  align-items: flex-start;
}
.middle-title {
  justify-content: center;
}
.h-100 {
  width: 750px;
  height: 100px;
}
</style>

<script>
import { DofMinibar, Core, DofCatalog } from 'dolphin-weex-ui'
const modal = weex.requireModule('modal')

export default {
  components: { DofMinibar, DofCatalog },
  data: () => ({
    leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
    moreIcon: '../../assets/image/header/icon_more_black@3x.png',
    backIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/ico_back_black@3x.png',
    shareIcon: '../../assets/image/header/icon_share_black.png'
  }),
  created() {},
  methods: {
    minibarLeftButtonClick() {},
    minibarRightButtonClick() {
      Core.reload()
    },
    rightButtonClickedHandler() {
      this.$toast('minibar right clicked!')
    },
    showPop() {}
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

# Attributes

Prop Type Required Default Description
title String Y - 标题
left-button String N 返回图标 左侧 button icon
right-button String N - 右侧 button icon
right-text String N - 右侧 button 文案，优先显示
left-text String N - 左侧文案，优先显示
text-color String N #333333 标题颜色
background-color String N #ffffff 背景颜色
use-default-return Boolean N true 是否使用默认的返回
show Boolean N true 是否显示
bar-style Object N {} 覆盖修改原有的样式
middle-text-style Object N {} <slot name="middle"></slot>中的样式
is-immersion Boolean N false 是否沉浸/全屏显示

# Slot

当以上配置都不满足时候，你可以使用 slot 来自定义设置你的组件。

  1. <slot name="left"></slot>：左边返回坑位
  2. <slot name="middle"></slot>：中间标题坑位
  3. <slot name="right"></slot>：右边坑位

# Events

事件名 说明 回调参数 备注
dofMinibarLeftButtonClicked 点击左边图标 - 有默认返回行为，可通过设置use-default-return属性为 false 取消默认返回行为
dofMinibarRightButtonClicked 点击右边图标 - -

WARNING

⚠️ 注意：点击左侧返回图标默认带有返回上一级的行为，dofMinibarLeftButtonClicked点击事件中不需要重复写返回的代码逻辑，否则会出现向上返回两级的问题。如需取消该默认行为，请设置use-default-return属性为 false

Last Updated: 11/9/2022, 6:04:32 PM

← 3.2 标签页 （Tab） →