wxc-minibar

Weex 顶部导航栏组件

规则

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

Demo

    

使用方法

<template>
  <div class="container" :style="{ height: height }">
    <div class="demo">
      <text class="text">配置颜色</text>
      <wxc-minibar title="标题"
                   background-color="#009ff0"
                   text-color="#FFFFFF"
                   right-text="更多"
                   @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                   @wxcMinibarRightButtonClicked="minibarRightButtonClick"></wxc-minibar>
    </div>
  </div>
</template>

<script>
  import { WxcMinibar } from 'weex-ui';
  const modal = weex.requireModule('modal');

  export default {
    components: { WxcMinibar },
    methods: {
      minibarLeftButtonClick () {
      },
      minibarRightButtonClick () {
        modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
      }
    }
  };
</script>

更详细代码可以参考 demo

可配置参数

Prop	Type	Required	Default	Description
title	String	Y	-	标题
right-button	String	N	-	右侧button icon
right-text	String	N	-	右侧button文案，优先显示
left-button	String	N	返回图标	左侧 button icon
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	{}	覆盖修改原有的样式

Slot

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

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

<wxc-minibar background-color="#FFF3CD">
  <image src="https://img.alicdn.com/tfs/TB1QN8pdlHH8KJjy0FbXXcqlpXa-220-80.png"
         slot="left"
         style="height: 32px;width: 88px;"></image>
  <text style="font-size: 40px;" slot="middle">Customize this component</text>
  <image slot="right"
         src="https://img.alicdn.com/tfs/TB1j39Uc0fJ8KJjy0FeXXXKEXXa-160-128.png"
         style="height: 32px;width: 40px"></image>
</wxc-minibar>

事件回调

// @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
// @wxcMinibarRightButtonClicked="minibarRightButtonClick"