[Improvement] NoticeBar: update demo

example/pages/notice-bar/index.js

@@ -1,28 +1,5 @@
 Page({
   data: {
-    bar1: {
+    text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
-      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
-      scrollable: true,
-      delay: 1000
-    },
-    bar2: {
-      text: '足协杯战线连续第2年上演广州德比战',
-      color: '#fff',
-      backgroundColor: '#000'
-    },
-    bar3: {
-      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
-    },
-    bar4: {
-      text: '带icon的公告',
-      leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png'
-    },
-    bar5: {
-      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
-      leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png',
-      mode: 'closeable',
-      scrollable: true,
-      speed: 10
-    }
   }
 });

example/pages/notice-bar/index.json

@@ -1,7 +1,7 @@
 {
   "navigationBarTitleText": "NoticeBar 通告栏",
   "usingComponents": {
-    "van-notice-bar": "../../dist/notice-bar/index",
+    "demo-block": "../../components/demo-block/index",
-    "van-panel": "../../dist/panel/index"
+    "van-notice-bar": "../../dist/notice-bar/index"
   }
 }

example/pages/notice-bar/index.wxml

@@ -1,51 +1,15 @@
-
+<demo-block title="基础用法">
-<van-panel title="滚动通告栏">
   <van-notice-bar
-    text="{{ bar1.text }}"
+    text="{{ text }}"
-    scrollable="{{ bar1.scrollable }}"
+    left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
   />
-</van-panel>
+</demo-block>
 
-<van-panel title="延时滚动通告栏">
+<demo-block title="禁用滚动">
-  <van-notice-bar
+  <van-notice-bar scrollable="{{ false }}" text="{{ text }}" />
-    text="{{ bar1.text }}"
+</demo-block>
-    scrollable="{{ bar1.scrollable }}"
-    delay="{{ bar1.delay }}"
-  />
-</van-panel>
 
-<van-panel title="初始速度低滚动通告栏">
+<demo-block title="通告栏模式">
-  <van-notice-bar
+  <van-notice-bar mode="closeable" text="{{ text }}" custom-class="demo-margin-bottom" />
-    text="{{ bar1.text }}"
+  <van-notice-bar mode="link" text="{{ text }}" />
-    scrollable="{{ bar1.scrollable }}"
+</demo-block>
-    speed="{{ bar5.speed }}"
-  />
-</van-panel>
-
-<van-panel title="改变颜色通告栏">
-  <van-notice-bar
-    text="{{ bar2.text }}"
-    color="{{ bar2.color }}"
-    background-color="{{ bar2.backgroundColor }}"
-  />
-</van-panel>
-
-<van-panel title="静止通告栏">
-  <van-notice-bar
-    text="{{ bar3.text }}"
-  />
-</van-panel>
-
-<van-panel title="带icon公告">
-  <van-notice-bar
-    text="{{ bar4.text }}"
-    left-icon="{{ bar4.leftIcon }}"
-  />
-</van-panel>
-
-<van-panel title="可关闭公告">
-  <van-notice-bar
-    text="{{ bar5.text }}"
-    mode="{{ bar5.mode }}"
-  />
-</van-panel>

packages/notice-bar/README.md

@@ -1,95 +1,75 @@
 ## NoticeBar 通告栏
 
 ### 使用指南
+
 在 index.json 中引入组件
 ```json
-{
+"usingComponents": {
-  "usingComponents": {
+  "van-notice-bar": "path/to/vant-weapp/dist/notice-bar/index"
-    "van-notice-bar": "path/to/vant-weapp/dist/notice-bar/index"
-  }
 }
 ```
 
-在 index.js 中声明组件数据
-```js
-// 在 Page 中声明 NoticeBar 依赖的展示数据
-Page({
-  data: {
-    text: 'xxx',
-    scrollable: 'xxx',
-    ...
-  }
-})
-```
 
 ### 代码演示
-`NoticeBar` 组件支持滚动和静止两种展示方式，通过 text 传入展示文案
 
-### 静止公告栏
+#### 基础用法
+
 ```html
 <van-notice-bar
-  text="{{ text }}"
+  left-icon="https://img.yzcdn.cn/1.png"
+  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
 />
 ```
 
-### 滚动通告栏
+#### 禁用滚动
+文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
+
 ```html
 <van-notice-bar
-  text="{{ text }}"
+  scrollable="false"
-  scrollable="true"
+  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
 />
 ```
 
-### 延时滚动通告栏
+#### 通告栏模式
-```html
+默认模式为空，支持`closeable`和`link`。
-<van-notice-bar
-  text="{{ text }}"
-  scrollable="true"
-  delay="{{ delay }}"
-/>
-```
 
-### 改变滚动通告栏滚动速度
 ```html
+<!-- closeable 模式，在右侧显示关闭按钮 -->
 <van-notice-bar
-  text="{{ text }}"
-  scrollable="true"
-  speed="{{ speed }}"
-/>
-```
-
-### 自定义通告栏字体颜色和背景色
-```html
-<van-notice-bar
-  text="{{ text }}"
-  color="{{ color }}"
-  background-color="{{ backgroundColor }}"
-/>
-```
-
-### 添加左侧icon通告栏
-```html
-<van-notice-bar
-  text="{{ text }}"
-  left-icon="https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
-/>
-```
-
-### 可关闭通告栏
-```html
-<van-notice-bar
-  text="{{ text }}"
   mode="closeable"
+  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
+/>
+
+<!-- link 模式，在右侧显示链接箭头 -->
+<van-notice-bar
+  mode="link"
+  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
 />
 ```
 
-| 参数       | 说明      | 类型       | 默认值       | 可选值     |
+### API
-|-----------|-----------|-----------|-------------|-------------|
+
-| text | 通告栏展示文案 | String | - | |
+| 参数 | 说明 | 类型 | 默认值 |
-| mode | 通告栏模式 | String | '' | `closeable` |
+|-----------|-----------|-----------|-------------|
-| delay | 滚动延时时间 | Number | 0 | |
+| mode | 通告栏模式，可选值为 `closeable` `link` | `String` | `''` |
-| speed | 滚动速度 | Number | 40 | |
+| delay | 动画延迟时间 (s) | `Number` | `1` |
-| scrollable | 是否可滚动 | Boolean | false | |
+| speed | 滚动速率 (px/s) | `Number` | `50` |
-| leftIcon | 左侧图标 | String | - | |
+| scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` |
-| color | 通告栏字体颜色 | String | `#f60` | |
+| left-icon | 左侧图标图片 URL | `String` | - |
-| backgroundColor | 通告栏背景色 | String | `#fff7cc` |
+| color | 文本颜色 | `String` | `#f60` |
+| background | 滚动条背景 | `String` | `#fff7cc` |
+| open-type | 微信开放能力 | `String` | `navigate` |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| tap | 点击事件回调 | - |
+
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |

packages/notice-bar/index.js

@@ -1,8 +1,10 @@
-const VALID_MODE = ['closeable'];
+const VALID_MODE = ['closeable', 'link'];
 const FONT_COLOR = '#f60';
 const BG_COLOR = '#fff7cc';
 
 Component({
+  externalClasses: ['custom-class'],
+
   properties: {
     text: {
       type: String,
@@ -29,11 +31,11 @@ Component({
     },
     speed: {
       type: Number,
-      value: 40
+      value: 50
     },
     scrollable: {
       type: Boolean,
-      value: false
+      value: true
     },
     leftIcon: {
       type: String,
@@ -166,6 +168,10 @@ Component({
         show: false,
         timer: null
       });
+    },
+
+    onTap(event) {
+      this.triggerEvent('tap', event);
     }
   }
 });

packages/notice-bar/index.wxml

@@ -1,7 +1,8 @@
 <view
   wx:if="{{ show }}"
-  class="van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
+  class="custom-class van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
   style="color: {{ color }};background-color: {{ backgroundColor }}"
+  bind:tap="onTap"
 >
   <view wx:if="{{ leftIcon }}" class="van-notice-bar__left-icon">
     <image src="{{ leftIcon }}" />
@@ -24,7 +25,7 @@
       url="{{ url }}"
       open-type="{{ openType }}"
     >
-      <van-icon class="van-notice-bar__right-icon" type="arrow" />
+      <van-icon class="van-notice-bar__right-icon" name="arrow" />
     </navigator>
   </block>
 </view>