Skip to content

Commit 86152d4

Browse files
kobeCristianopangxie1991
kobeCristiano
authored and
pangxie1991
committed
[refactor] Noticebar：升级到自定义组件 (youzan#165)
* [improvement] Tab：升级到自定义组件 * fix: 去除冗余example代码 * [refactor] 重构badge为自定义组件 (youzan#160) * fix: 去除tab组件使用对象入参方式，修改example用例 * refactor: 重构noticebar组件 * fix: 去除tab组件冗余属性字段
1 parent a1b70a8 commit 86152d4

11 files changed

Lines changed: 374 additions & 143 deletions

File tree

‎example/pages/noticebar/index.js‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
1-
var Zan = require('../../dist/index');
2-
3-
Page(Object.assign({}, Zan.NoticeBar, {
1+
Page({
42
data: {
5-
movable: {
6-
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
3+
bar1: {
4+
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
5+
scrollable: true,
6+
delay: 1000
77
},
8-
static1: {
9-
text: '足协杯战线连续第2年上演广州德比战'
8+
bar2: {
9+
text: '足协杯战线连续第2年上演广州德比战',
10+
color: '#fff',
11+
backgroundColor: '#000'
1012
},
11-
static2: {
13+
bar3: {
1214
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
15+
},
16+
bar4: {
17+
text: '带icon的公告',
18+
leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png'
19+
},
20+
bar5: {
21+
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
22+
leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png',
23+
mode: 'closeable',
24+
scrollable: true,
25+
speed: 10
1326
}
14-
},
15-
onShow() {
16-
// 滚动通告栏需要initScroll
17-
this.initZanNoticeBarScroll('movable');
18-
// initScroll的通告栏如果宽度足够显示内容将保持静止
19-
this.initZanNoticeBarScroll('static1');
20-
// 不进行initScroll的通告栏也将保持静止
21-
// this.initZanNoticeBarScroll('static2');
2227
}
23-
}))
28+
})

‎example/pages/noticebar/index.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"navigationBarTitleText": "Noticebar 通告栏"
2+
"navigationBarTitleText": "Noticebar 通告栏",
3+
"usingComponents": {
4+
"zan-noticebar": "../../dist/noticebar/index"
5+
}
36
}

‎example/pages/noticebar/index.wxml‎

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,63 @@
1-
<import src="/dist/noticebar/index.wxml" />
21
<view class="container">
32

43
<view class="doc-title zan-hairline--bottom">NOTICEBAR</view>
54

65
<view class="zan-panel-title">滚动通告栏</view>
76
<view class="zan-panel">
8-
<template
9-
is="zan-noticebar"
10-
data="{{ ...movable, componentId: 'movable' }}"
11-
></template>
7+
<zan-noticebar
8+
text="{{ bar1.text }}"
9+
scrollable="{{ bar1.scrollable }}"
10+
/>
1211
</view>
1312

14-
<view class="zan-panel-title">静止通告栏1</view>
13+
<view class="zan-panel-title">延时滚动通告栏</view>
1514
<view class="zan-panel">
16-
<template
17-
is="zan-noticebar"
18-
data="{{ ...static1, componentId: 'static1' }}"
19-
></template>
15+
<zan-noticebar
16+
text="{{ bar1.text }}"
17+
scrollable="{{ bar1.scrollable }}"
18+
delay="{{ bar1.delay }}"
19+
/>
2020
</view>
2121

22-
<view class="zan-panel-title">静止通告栏2</view>
22+
<view class="zan-panel-title">初始速度低滚动通告栏</view>
2323
<view class="zan-panel">
24-
<template
25-
is="zan-noticebar"
26-
data="{{ ...static2, componentId: 'static2' }}"
27-
></template>
24+
<zan-noticebar
25+
text="{{ bar1.text }}"
26+
scrollable="{{ bar1.scrollable }}"
27+
speed="{{ bar5.speed }}"
28+
/>
29+
</view>
30+
31+
<view class="zan-panel-title">改变颜色通告栏</view>
32+
<view class="zan-panel">
33+
<zan-noticebar
34+
text="{{ bar2.text }}"
35+
color="{{ bar2.color }}"
36+
background-color="{{ bar2.backgroundColor }}"
37+
/>
38+
</view>
39+
40+
<view class="zan-panel-title">静止通告栏</view>
41+
<view class="zan-panel">
42+
<zan-noticebar
43+
text="{{ bar3.text }}"
44+
/>
45+
</view>
46+
47+
<view class="zan-panel-title">带icon公告</view>
48+
<view class="zan-panel">
49+
<zan-noticebar
50+
text="{{ bar4.text }}"
51+
left-icon="{{ bar4.leftIcon }}"
52+
/>
53+
</view>
54+
55+
<view class="zan-panel-title">可关闭公告</view>
56+
<view class="zan-panel">
57+
<zan-noticebar
58+
text="{{ bar5.text }}"
59+
mode="{{ bar5.mode }}"
60+
/>
2861
</view>
2962

3063
</view>

‎example/pages/tab/index.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
const interval = 50;
2-
let moduleId = 1;
3-
41
Page({
52
data: {
63
tab1: {

‎packages/noticebar/README.md‎

Lines changed: 75 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,95 @@
11
## Noticebar 通告栏
22

33
### 使用指南
4-
在 app.wxss 中引入组件库所有样式
5-
```css
6-
@import "path/to/zanui-weapp/dist/index.wxss";
4+
在 index.json 中引入组件
5+
```json
6+
{
7+
"usingComponents": {
8+
"zan-noticebar": "path/to/zanui-weapp/dist/noticebar/index"
9+
}
10+
}
11+
```
12+
13+
在 index.js 中声明组件数据
14+
```js
15+
// 在 Page 中声明 Noticebar 依赖的展示数据
16+
Page({
17+
data: {
18+
text: 'xxx',
19+
scrollable: 'xxx',
20+
...
21+
}
22+
})
723
```
824

9-
在需要使用的页面里引入组件库模板和脚本
25+
### 代码演示
26+
`Noticebar` 组件支持滚动和静止两种展示方式，通过 text 传入展示文案
27+
28+
### 静止公告栏
1029
```html
11-
<import src="path/to/zanui-weapp/dist/noticebar/index.wxml" />
30+
<zan-noticebar
31+
text="{{ text }}"
32+
/>
33+
```
1234

13-
<!-- 直接使用 zan-noticebar 模板，并且直接传入设置值 -->
14-
<template is="zan-noticebar" data="{{ ...data, componentId: 'noticebar' }}"></template>
35+
### 滚动通告栏
36+
```html
37+
<zan-noticebar
38+
text="{{ text }}"
39+
scrollable="true"
40+
/>
1541
```
1642

17-
// 在 Page 中混入 Noticebar 里面声明的方法
18-
```js
19-
const { Noticebar, extend } = require('path/to/zanui-weapp/dist/index');
43+
### 延时滚动通告栏
44+
```html
45+
<zan-noticebar
46+
text="{{ text }}"
47+
scrollable="true"
48+
delay="{{ delay }}"
49+
/>
50+
```
2051

21-
Page(extend({}, Noticebar, {
22-
// ...
23-
}));
52+
### 改变滚动通告栏滚动速度
53+
```html
54+
<zan-noticebar
55+
text="{{ text }}"
56+
scrollable="true"
57+
speed="{{ speed }}"
58+
/>
2459
```
2560

26-
### 代码演示
27-
`Noticebar` 组件支持滚动和静止两种展示方式，通过 text 传入展示文案
61+
### 自定义通告栏字体颜色和背景色
2862
```html
29-
<template is="zan-noticebar" data="{{ text: '展示文案', componentId: 'noticebar' }}"></template>
63+
<zan-noticebar
64+
text="{{ text }}"
65+
color="{{ color }}"
66+
background-color="{{ backgroundColor }}"
67+
/>
3068
```
3169

32-
**注意**
70+
### 添加左侧icon通告栏
71+
```html
72+
<zan-noticebar
73+
text="{{ text }}"
74+
left-icon="https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
75+
/>
76+
```
3377

34-
如果组件需要开启滚动展示，需要在 Page 的脚本中执行 initZanNoticeBarScroll 方法，来开启滚动展示
35-
```js
36-
Page(extend({}, Noticebar, {
37-
// ...
38-
onShow() {
39-
// 在方法中传入对应的 componentId
40-
this.initZanNoticeBarScroll('movable');
41-
}
42-
// ...
43-
}));
78+
### 可关闭通告栏
79+
```html
80+
<zan-noticebar
81+
text="{{ text }}"
82+
mode="closeable"
83+
/>
4484
```
4585

46-
| 参数 | 说明 | 类型 | 默认值 | 必须 |
86+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
4787
|-----------|-----------|-----------|-------------|-------------|
4888
| text | 通告栏展示文案 | String | - | |
49-
| componentId | 用于区分页面多个 Noticebar 组件，在调用 initZanNoticeBarScroll 时需要传入 | String | - | |
89+
| mode | 通告栏模式 | String | '' | `closeable` |
90+
| delay | 滚动延时时间 | Number | 0 | |
91+
| speed | 滚动速度 | Number | 40 | |
92+
| scrollable | 是否可滚动 | Boolean | false | |
93+
| leftIcon | 左侧图标 | String | - | |
94+
| color | 通告栏字体颜色 | String | `#f60` | |
95+
| backgroundColor | 通告栏背景色 | String | `#fff7cc` |

0 commit comments

Comments
 (0)