• NoticeBar 通告栏

    NoticeBar 通告栏

    通告栏组件，组件名：uni-notice-bar，代码块： uNoticeBar。

    使用方式：

    在 script 中引用组件 

    1. import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue"
    2. export default {
    3.     components: {uniNoticeBar}
    4. }

    基本用法

    1. <uni-notice-bar 
    2.     single="true" 
    3.     text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
    4. </uni-notice-bar>
    5. <uni-notice-bar 
    6.     text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
    7. </uni-notice-bar>

    文字滚动

    1. <uni-notice-bar 
    2.     show-icon="true" 
    3.     scrollable="true" single="true" 
    4.     text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
    5. </uni-notice-bar>

    显示图标

    1. <uni-notice-bar 
    2.     show-icon="true" 
    3.     text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
    4. </uni-notice-bar>

    显示关闭按钮

    1. <uni-notice-bar 
    2.     show-close="true" 
    3.     show-icon="true" text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
    4. </uni-notice-bar>

    查看更多

    1.  <uni-notice-bar 
    2.     @getmore="getMore" 
    3.     more-text="查看更多" 
    4.     single="true" 
    5.     text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">
    6. </uni-notice-bar>

    属性说明：

    属性名类型默认值说明
    textString-显示文字
    more-textString-“查看更多”的文本，如果设置文字，NoticeBar为单行
    speedNumber100文字滚动的速度，默认100px/秒
    background-colorString#fffbe8背景颜色
    colorString#de8c17文字颜色
    singleBooleanfalse是否单行
    scrollableBooleanfalse是否滚动，为true时，NoticeBar为单行
    show-iconBooleanfalse是否显示左侧喇叭图标
    show-closeBooleanfalse是否显示左侧关闭按钮

    事件说明：

    事件名称说明
    click点击 NoticeBar 触发事件
    close关闭 NoticeBar 触发事件
    getmore点击”查看更多“时触发事件

    Tips

    • 组件实际运行效果参考：https://github.com/dcloudio/uni-ui
    • npm 使用方式参考：https://ext.dcloud.net.cn/plugin?id=55
    • 由于H5端默认加了scope导致此组件的滚动功能将不会生效
    • hello uni-app里有相关示例，说不能用的，对比看下hello uni-app里示例