uni-notice-bar.md

> **组件名：uni-notice-bar**
> 代码块： `uNoticeBar`
> 
>  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-notice-bar)

通告栏组件 。

### 基本用法

在 ``template`` 中使用组件

```html
<!-- 基本用法 -->
<uni-notice-bar single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

<!-- 文字滚动 -->
<uni-notice-bar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

<!-- 显示图标 -->
<uni-notice-bar showIcon="true" text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

<!-- 显示关闭按钮 -->
<uni-notice-bar showClose="true" showIcon="true" text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

<!-- 查看更多 -->
 <uni-notice-bar @getmore="getMore" :showGetMore="true" moreText="查看更多" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
```

> **注意**
> 如果需要异步获取内容后展示需要使用`v-if`进行控制，`<uni-notice-bar v-if="text" :text="text"></uni-notice-bar>`


## NoticeBar API

### NoticeBar Props

|属性名|类型	|默认值|说明|
|:-:|:-:|:-:|:-:|
|speed|Number|100|文字滚动的速度，默认100px/秒|
|text|String|-|显示文字|
|background-color|String|#fffbe8|背景颜色|
|color|String|#de8c17|文字颜色|
|moreColor|String|#999999|查看更多文字的颜色|
|moreText|String|-|设置“查看更多”的文本|
|single|Boolean|false|是否单行|
|scrollable|Boolean|false|是否滚动，为true时，NoticeBar为单行|
|showIcon|Boolean|false	|是否显示左侧喇叭图标|
|showClose|Boolean|false|是否显示左侧关闭按钮|
|showGetMore|Boolean|false|是否显示右侧查看更多图标，为true时，NoticeBar为单行|

### NoticeBar Events

|事件名称|说明|返回值	|
|:-:|:-:|:-:|
|@click|点击 NoticeBar 触发事件	|-|
|@close|关闭 NoticeBar 触发事件	|-|
|@getmore|点击”查看更多“时触发事件	|-|


## 组件示例

点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar)