docs(notice-bar): add notice-bar example (#2523)

example/pages/notice-bar/index.js

@@ -2,6 +2,12 @@ import Page from '../../common/page';
 
 Page({
   data: {
-    text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
+    text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
+    speedValue: 80
+  },
+  onChange(event) {
+    this.setData({
+      speedValue: event.detail
+    });
   }
 });

example/pages/notice-bar/index.wxml

@@ -24,3 +24,17 @@
     <text slot="right-icon">[结束]</text>
   </van-notice-bar>
 </demo-block>
+
+<demo-block title="自定义滚动速率">
+  <van-notice-bar
+    text="{{ text }}"
+    speed="{{speedValue}}"
+    left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+  />
+  当前速度{{speedValue}}px/s
+  <van-slider
+    value="{{speedValue}}"
+    custom-class="slider"
+    bind:change="onChange"
+  />
+</demo-block>

packages/notice-bar/README.md

@@ -68,6 +68,16 @@
   text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
 />
 ```
+### 自定义滚动速率
+使用`speed`属性控制滚动速率
+
+```html
+<van-notice-bar
+  text="{{ text }}"
+  speed="{{speedValue}}"
+  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+/>
+```
 
 ## API
 

packages/notice-bar/index.ts

@@ -56,6 +56,9 @@ VantComponent({
   watch: {
     text() {
       this.setData({}, this.init);
+    },
+    speed() {
+      this.setData({}, this.init);
     }
   },