kobeCristiano 86152d45ce [refactor] Noticebar:升级到自定义组件 (#165)
* [improvement] Tab:升级到自定义组件

* fix: 去除冗余example代码

* [refactor] 重构badge为自定义组件 (#160)

* fix: 去除tab组件使用对象入参方式,修改example用例

* refactor: 重构noticebar组件

* fix: 去除tab组件冗余属性字段
2018-03-25 18:30:53 +08:00

96 lines
1.8 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## Noticebar 通告栏
### 使用指南
在 index.json 中引入组件
```json
{
"usingComponents": {
"zan-noticebar": "path/to/zanui-weapp/dist/noticebar/index"
}
}
```
在 index.js 中声明组件数据
```js
// 在 Page 中声明 Noticebar 依赖的展示数据
Page({
data: {
text: 'xxx',
scrollable: 'xxx',
...
}
})
```
### 代码演示
`Noticebar` 组件支持滚动和静止两种展示方式,通过 text 传入展示文案
### 静止公告栏
```html
<zan-noticebar
text="{{ text }}"
/>
```
### 滚动通告栏
```html
<zan-noticebar
text="{{ text }}"
scrollable="true"
/>
```
### 延时滚动通告栏
```html
<zan-noticebar
text="{{ text }}"
scrollable="true"
delay="{{ delay }}"
/>
```
### 改变滚动通告栏滚动速度
```html
<zan-noticebar
text="{{ text }}"
scrollable="true"
speed="{{ speed }}"
/>
```
### 自定义通告栏字体颜色和背景色
```html
<zan-noticebar
text="{{ text }}"
color="{{ color }}"
background-color="{{ backgroundColor }}"
/>
```
### 添加左侧icon通告栏
```html
<zan-noticebar
text="{{ text }}"
left-icon="https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
/>
```
### 可关闭通告栏
```html
<zan-noticebar
text="{{ text }}"
mode="closeable"
/>
```
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| text | 通告栏展示文案 | String | - | |
| mode | 通告栏模式 | String | '' | `closeable` |
| delay | 滚动延时时间 | Number | 0 | |
| speed | 滚动速度 | Number | 40 | |
| scrollable | 是否可滚动 | Boolean | false | |
| leftIcon | 左侧图标 | String | - | |
| color | 通告栏字体颜色 | String | `#f60` | |
| backgroundColor | 通告栏背景色 | String | `#fff7cc` |