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

src/notice-bar/README.md

@@ -53,6 +53,30 @@ Vue.use(NoticeBar);
 </van-notice-bar>
 ```
 
+### Vertical Scroll
+
+```html
+<van-notice-bar left-icon="volume-o" :scrollable="false">
+  <van-swipe
+    vertical
+    class="notice-swipe"
+    :autoplay="3000"
+    :show-indicators="false"
+  >
+    <van-swipe-item>Content 1</van-swipe-item>
+    <van-swipe-item>Content 2</van-swipe-item>
+    <van-swipe-item>Content 3</van-swipe-item>
+  </van-swipe>
+</van-notice-bar>
+
+<style>
+  .notice-swipe {
+    height: 40px;
+    line-height: 40px;
+  }
+</style>
+```
+
 ## API
 
 ### Props

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` |

src/notice-bar/demo/index.vue

@@ -25,6 +25,21 @@
         left-icon="info-o"
       />
     </demo-block>
+
+    <demo-block v-if="!isWeapp" :title="t('verticalScroll')">
+      <van-notice-bar left-icon="volume-o" :scrollable="false">
+        <van-swipe
+          vertical
+          class="notice-swipe"
+          :autoplay="3000"
+          :show-indicators="false"
+        >
+          <van-swipe-item>{{ t('content') }} 1</van-swipe-item>
+          <van-swipe-item>{{ t('content') }} 2</van-swipe-item>
+          <van-swipe-item>{{ t('content') }} 3</van-swipe-item>
+        </van-swipe>
+      </van-notice-bar>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -32,20 +47,24 @@
 export default {
   i18n: {
     'zh-CN': {
-      unscrollable: '禁用滚动',
-      mode: '通知栏模式',
-      wrapable: '多行展示',
       text:
         '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
+      mode: '通知栏模式',
+      content: '内容',
+      wrapable: '多行展示',
+      unscrollable: '禁用滚动',
       customStyle: '自定义样式',
+      verticalScroll: '垂直滚动',
     },
     'en-US': {
-      mode: 'Mode',
-      wrapable: 'Wrapable',
-      unscrollable: 'Disable scroll',
       text:
         'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
+      mode: 'Mode',
+      content: 'Content',
+      wrapable: 'Wrapable',
       customStyle: 'Custom Style',
+      unscrollable: 'Disable scroll',
+      verticalScroll: 'Vertical Scroll',
     },
   },
 };
@@ -64,5 +83,10 @@ export default {
   .van-doc-demo-block__title {
     padding-top: 24px;
   }
+
+  .notice-swipe {
+    height: 40px;
+    line-height: 40px;
+  }
 }
 </style>

src/notice-bar/test/__snapshots__/demo.spec.js.snap

@@ -46,5 +46,21 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
+        <!----></i>
+      <div role="marquee" class="van-notice-bar__wrap">
+        <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">
+          <div class="notice-swipe van-swipe">
+            <div class="van-swipe__track van-swipe__track--vertical" style="height: 0px; transition-duration: 0ms; transform: translateY(0px);">
+              <div class="van-swipe-item" style="height: 0px;">内容 1</div>
+              <div class="van-swipe-item" style="height: 0px;">内容 2</div>
+              <div class="van-swipe-item" style="height: 0px;">内容 3</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;