wxc-minibar

Weex 顶部导航栏组件

规则

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

Demo

wxc-minibar 导航栏 - 图1 wxc-minibar 导航栏 - 图2

使用方法

  1. <template>
  2.   <div class="container" :style="{ height: height }">
  3.     <div class="demo">
  4.       <text class="text">配置颜色</text>
  5.       <wxc-minibar title="标题"
  6.                    background-color="#009ff0"
  7.                    text-color="#FFFFFF"
  8.                    right-text="更多"
  9.                    @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
  10.                    @wxcMinibarRightButtonClicked="minibarRightButtonClick"></wxc-minibar>
  11.     </div>
  12.   </div>
  13. </template>
  15. <script>
  16.   import { WxcMinibar } from 'weex-ui';
  17.   const modal = weex.requireModule('modal');
  19.   export default {
  20.     components: { WxcMinibar },
  21.     methods: {
  22.       minibarLeftButtonClick () {
  23.       },
  24.       minibarRightButtonClick () {
  25.         modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
  26.       }
  27.     }
  28.   };
  29. </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 是否显示

Slot

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

  • ：左边返回坑位
  • ：中间标题坑位
  • ：右边坑位
    wxc-minibar 导航栏 - 图3
  1. <wxc-minibar background-color="#FFF3CD">
  2.   <image src="https://img.alicdn.com/tfs/TB1QN8pdlHH8KJjy0FbXXcqlpXa-220-80.png"
  3.          slot="left"
  4.          style="height: 32px;width: 88px;"></image>
  5.   <text style="font-size: 40px;" slot="middle">Customize this component</text>
  6.   <image slot="right"
  7.          src="https://img.alicdn.com/tfs/TB1j39Uc0fJ8KJjy0FeXXXKEXXa-160-128.png"
  8.          style="height: 32px;width: 40px"></image>
  9. </wxc-minibar>

事件回调

  1. // @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
  2. // @wxcMinibarRightButtonClicked="minibarRightButtonClick"

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-minibar/