# NoticeBar 通告栏

### 引入

在`index.config.js中引入组件

```json
"usingComponents": {
  "van-notice-bar": "@vant/weapp/notice-bar/index"
}
```

## 代码演示

### 基础用法

```html
 <van-notice-bar
      text={'提交的小程序功能完整，可正常打开和运行，而不是测试版或 Demo，小程序的调试和预览可在开发者工具进行。'}
      scrollable={true}
      speed={50}
      leftIcon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
 />
```

```js

  state = {
     text: '提交的小程序功能完整，可正常打开和运行，而不是测试版或 Demo，小程序的调试和预览可在开发者工具进行。',
     speedValue: 80
   };

   onChange(event) {
     this.setState({
       speedValue: event.detail
     });
   }

```

### 滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，通过 `scrollable` 属性可以控制该行为。

```html
<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
 <van-notice-bar mode="closeable" scrollable={true}
                 speed={50} text={this.state.text} customClass="demo-margin-bottom"/>

<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
<van-notice-bar scrollable={false} text={this.state.text}/>
```

### 多行展示

文字较长时，可以通过设置 `wrapable` 属性来开启多行展示。

```html
<van-notice-bar wrapable scrollable={false} text={this.state.text}/>
```

### 通知栏模式

通知栏支持 `closeable` 和 `link` 两种模式。

```html
<!-- closeable 模式，在右侧显示关闭按钮 -->
<van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />

<!-- link 模式，在右侧显示链接箭头 -->
<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />
```

### 使用左右插槽

```html
<van-notice-bar text={this.state.text}>
     <text slot="left-icon">[公告]</text>
     <text slot="right-icon">[结束]</text>
</van-notice-bar>
```

### 自定义滚动速率

使用`speed`属性控制滚动速率

```html
<van-notice-bar
  text={ this.state.text }
  speed={this.state.speedValue}
  leftIcon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
/>
```

## API
### 注:属性应用在组件上需要统一使用驼峰式命名，如custom-class应变为
```html
<van-button type="primary" customClass='myClass' size="large">大号按钮</van-button>
```
### 注:事件应用在组件上需要统一使用驼峰式命名，如bind:click/bind:search/bind:before-enter应变为
```html
<van-button type="primary" onClick={()=>this.onClick()}>大号按钮</van-button>
<van-search type="primary" onSearch={()=>this.onSearch()}>大号按钮</van-search>
<van-transition type="primary" onBeforeEnter={()=>this.onBeforeEnter()}>大号按钮</van-transition>
```
### Props

| 参数       | 说明                                     | 类型      | 默认值     |
| ---------- | ---------------------------------------- | --------- | ---------- |
| mode       | 通告栏模式，可选值为 `closeable` `link`  | _string_  | `''`       |
| text       | 通知文本内容                             | _string_  | `''`       |
| color      | 通知文本颜色                             | _string_  | `#ed6a0c`  |
| background | 滚动条背景                               | _string_  | `#fffbe8`  |
| left-icon  | 左侧[图标名称](#/icon)或图片链接         | _string_  | -          |
| delay      | 动画延迟时间 (s)                         | _number_  | `1`        |
| speed      | 滚动速率 (px/s)                          | _number_  | `50`       |
| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | `true`     |
| wrapable   | 是否开启文本换行，只在禁用滚动时生效     | _boolean_ | `false`    |
| open-type  | 微信开放能力                             | _string_  | `navigate` |

### Events

| 事件名 | 说明             | 参数           |
| ------ | ---------------- | -------------- |
| click  | 点击通知栏时触发 | _event: Event_ |
| close  | 关闭通知栏时触发 | _event: Event_ |

### Slot

| 名称       | 说明           |
| ---------- | -------------- |
| left-icon  | 自定义左侧图标 |
| right-icon | 自定义右侧图标 |

### 外部样式类

| 类名         | 说明         |
| ------------ | ------------ |
| custom-class | 根节点样式类 |