wxc-minbar使用

<wxc-minibar title="minibar标题"
            
:right-button="arrawSrc"
            
right-text="右侧文本"
            
left-button="http://iconfont.alicdn.com/t/1489455806593.png@100h_100w.jpg"
            
left-text="左侧文本"
            
text-color="#ff991f"
            
background-color="#5269ff"
            
:use-default-return="true"
            
:show="true"
>
</
wxc-minibar>

上面是一个<wxc-minibar>的全部设置。表现如下:

其中:

1.    title:标题。

2.    right-button:右侧按钮图标。若直接赋值,则不需要使用v-bind绑定;若引用data中的变量,则需要使用v-bind绑定。上面right-button属性使用了data中的变量arrawSrc,所以使用v-bind绑定;而下面的left-button属性直接赋值,所以不需要使用v-bind绑定。

3.    right-text:右侧文本。注意right-button与right-text是冲突的,其中right-text优先级高。也就是说,若即设置了right-button又设置了right-text,那么right-button无效,right-text起作用。

4.    left-button:同right-button。

5.    left-text:同right-text。

6.    text-color:文本的颜色。同时控制title,left-text,right-text三个文本的颜色。

7.    background-color:整个minibar的背景色。

8.    use-default-return:是否启用默认返回上一页。由于是布尔值,必须使用v-bind绑定。默认为true。若想启用组件左侧区域的点击事件,需要设为false。

9.    show:是否显示minibar。

与wxc-cell支持cellStyle不同,wxc-minibar不支持自定义样式。

 

wxc-minibar有3个slot:

1.   <slotname="left"></slot>:左侧区域。

2.   <slotname="middle"></slot>:中间title区域。

3.   <slotname="right"></slot>:右侧区域。

使用:

<wxc-minibar title="minibar标题"
             :right-button="arrawSrc"
             right-text="右侧文本"
             left-button="http://iconfont.alicdn.com/t/1489455806593.png@100h_100w.jpg"
             left-text="左侧文本"
             text-color="#ff991f"
             background-color="#5269ff"
             :use-default-return="true"
             :show="true">
    <text slot="left">新左侧文本</text>
    <text slot="middle">新中间文本</text>
    <text slot="right">新右侧文本</text>
</wxc-minibar>

效果:

从上面结果中可以看出,slot的优先级是最高的,会替换掉原有的right-button/left-button和right-text/left-text。

 

wxc-minibar支持两个事件:

1.    wxcMinibarLeftButtonClicked:点击左侧区域。

2.    wxcMinibarRightButtonClicked:点击右侧区域。

不支持点击中间的title来进行响应。

<wxc-minibar title="minibar标题"
            
:show="true"
            
@wxcMinibarLeftButtonClicked="
minibarLeftButtonClick"
            
@wxcMinibarRightButtonClicked="
minibarRightButtonClick">

</wxc-minibar>

注意左侧区域点击事件默认是响应返回上一页面。若要左侧区域的自定义点击事件生效,需要将use-default-return属性设为false。


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得用于任何商业用途,转载请注明出处。 https://blog.csdn.net/fyyyr/article/details/80336100
文章标签: weex-ui wxc-minibar
个人分类: weex-ui
上一篇wxc-button使用
下一篇wxc-icon使用
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭