标题栏（Mini bar）

3.1 标题栏（Mini bar）

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

#设计原则

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

img

#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>

#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

posted on 2024-12-12 09:23  AtlasLapetos  阅读(256)  评论(0)    收藏  举报

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3