docs(NoticeBar): add vertical scroll demo (#6455)

src/notice-bar/README.zh-CN.md

@@ -19,7 +19,7 @@ Vue.use(NoticeBar);
 
 ### 禁用滚动
 
-文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
+文字内容多于一行时，可通过 `scrollable` 参数控制是否开启滚动。
 
 ```html
 <van-notice-bar :scrollable="false">
@@ -29,7 +29,7 @@ Vue.use(NoticeBar);
 
 ### 多行展示
 
-禁用滚动时，可以设置`wrapable`来开启多行展示
+禁用滚动时，可以设置 `wrapable` 来开启多行展示。
 
 ```html
 <van-notice-bar wrapable :scrollable="false">
@@ -39,7 +39,7 @@ Vue.use(NoticeBar);
 
 ### 通知栏模式
 
-默认模式为空，支持`closeable`和`link`两种模式
+默认模式为空，支持 `closeable` 和 `link` 两种模式。
 
 ```html
 <!-- closeable 模式，在右侧显示关闭按钮 -->
@@ -55,12 +55,40 @@ Vue.use(NoticeBar);
 
 ### 自定义样式
 
+通过 `color` 属性设置文本颜色，通过 `background` 属性设置背景色。
+
 ```html
 <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
   通知内容
 </van-notice-bar>
 ```
 
+### 垂直滚动
+
+搭配 NoticeBar 和 Swipe 组件可以实现垂直滚动的效果。
+
+```html
+<van-notice-bar left-icon="volume-o" :scrollable="false">
+  <van-swipe
+    vertical
+    class="notice-swipe"
+    :autoplay="3000"
+    :show-indicators="false"
+  >
+    <van-swipe-item>内容 1</van-swipe-item>
+    <van-swipe-item>内容 2</van-swipe-item>
+    <van-swipe-item>内容 3</van-swipe-item>
+  </van-swipe>
+</van-notice-bar>
+
+<style>
+  .notice-swipe {
+    height: 40px;
+    line-height: 40px;
+  }
+</style>
+```
+
 ## API
 
 ### Props
@@ -69,7 +97,7 @@ Vue.use(NoticeBar);
 | --- | --- | --- | --- |
 | mode | 通知栏模式，可选值为 `closeable` `link` | _string_ | `''` |
 | text | 通知文本内容 | _string_ | `''` |
-| color | 文本颜色 | _string_ | `#f60` |
+| color | 通知文本颜色 | _string_ | `#f60` |
 | background | 滚动条背景 | _string_ | `#fff7cc` |
 | left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
 | delay | 动画延迟时间 (s) | _number \| string_ | `1` |