## Noticebar 通告栏

### 使用指南
在 app.wxss 中引入组件库所有样式
```css
@import "path/to/zanui-weapp/dist/index.wxss";
```

在需要使用的页面里引入组件库模板和脚本
```html
<import src="path/to/zanui-weapp/dist/noticebar/index.wxml" />

<!-- 直接使用 zan-noticebar 模板，并且直接传入设置值 -->
<template is="zan-noticebar" data="{{ ...data, componentId: 'noticebar'  }}"></template>
```

// 在 Page 中混入 Noticebar 里面声明的方法
```js
const { Noticebar, extend } = require('path/to/zanui-weapp/dist/index');

Page(extend({}, Noticebar, {
  // ...
}));
```

### 代码演示
`Noticebar` 组件支持滚动和静止两种展示方式，通过 text 传入展示文案
```html
<template is="zan-noticebar" data="{{ text: '展示文案', componentId: 'noticebar'  }}"></template>
```

**注意**

如果组件需要开启滚动展示，需要在 Page 的脚本中执行 initZanNoticeBarScroll 方法，来开启滚动展示
```js
Page(extend({}, Noticebar, {
  // ...
  onShow() {
    // 在方法中传入对应的 componentId
    this.initZanNoticeBarScroll('movable');
  }
  // ...
}));
```

| 参数       | 说明      | 类型       | 默认值       | 必须      |
|-----------|-----------|-----------|-------------|-------------|
| text | 通告栏展示文案 | String | - | |
| componentId | 用于区分页面多个 Noticebar 组件，在调用 initZanNoticeBarScroll 时需要传入 | String | - | |