diff --git a/src/common/utils.wxs b/src/common/utils.wxs
index 62194078f..0b4f80832 100644
--- a/src/common/utils.wxs
+++ b/src/common/utils.wxs
@@ -19,6 +19,10 @@ function isObject(obj) {
   return obj && obj.constructor === 'Object';
 }
 
+var isNoEmptyObj = function (obj) {
+  return isObject(obj) && JSON.stringify(obj) !== '{}';
+};
+
 function includes(arr, value) {
   if (!arr || !isArray(arr)) return false;
 
@@ -57,6 +61,7 @@ module.exports = {
   addUnit: addUnit,
   isArray: isArray,
   isObject: isObject,
+  isNoEmptyObj: isNoEmptyObj,
   includes: includes,
   cls: cls,
 };
diff --git a/src/notice-bar/README.en-US.md b/src/notice-bar/README.en-US.md
index 5ae0c2c94..3e90abd64 100644
--- a/src/notice-bar/README.en-US.md
+++ b/src/notice-bar/README.en-US.md
@@ -5,13 +5,14 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-content | String / Slot | - | \- | N
+content | String / Array / Slot | - | \- | N
 custom-style `v0.25.0` | String | - | \- | N
+direction | String | horizontal | options：horizontal/vertical | N
 external-classes | Array | - | `['t-class', 't-class-content', 't-class-prefix-icon', 't-class-extra', 't-class-suffix-icon']` | N
 extra | String / Slot | - | \- | N
 marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
-prefix-icon | String | - | \- | N
-suffix-icon | String | - | \- | N
+prefix-icon | String / Boolean/ Object / Slot | - | \- | N
+suffix-icon | String / Boolean / Object / Slot | - | \- | N
 theme | String | info | options：info/success/warning/error | N
 visible | Boolean | false | \- | N
 default-visible | Boolean | false | uncontrolled property | N
diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md
index 6a465c879..50a25aaa3 100644
--- a/src/notice-bar/README.md
+++ b/src/notice-bar/README.md
@@ -18,47 +18,54 @@ isComponent: true
 
 ## 代码演示
 
-### 基础静态公告栏
+### 组件类型
+
+纯文字的公告栏
 
 {{ base }}
 
-### 带图标静态公告栏
+带图标的公告栏
 
 {{ iconDemo }}
 
-### 带操作公告栏
+带操作的公告栏
 
 {{ event }}
 
-### 滚动公告栏
+自定义样式的公告栏
 
-{{ scrolling }}
+{{ custom }}
 
-### 自定义样式
+自定义内容的公告栏
 
-{{ custom }}
+{{ customization }}
+
+### 组件状态
 
-### 不同状态的公告栏
 公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
 
 {{ theme }}
 
-### 多行文字消息栏
+### 可滚动公告栏
+
+可滚动公告栏有水平（horizontal）和垂直（vertical）
+
+{{ scrolling }}
 
-{{ customization }}
 
 ## API
 ### NoticeBar Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-content | String / Slot | - | 文本内容 | N
+content | String / Array / Slot | - | 文本内容 | N
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。。`['t-class', 't-class-content', 't-class-prefix-icon', 't-class-extra', 't-class-suffix-icon']` | N
 extra | String / Slot | - | 右侧额外信息 | N
-marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
-prefix-icon | String | - | 前缀图标 | N
-suffix-icon | String | - | 后缀图标 | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
+prefix-icon | String / Boolean / Object / Slot | - | 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `'slot'` 表示使用插槽，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标。| N
+suffix-icon | String / Object / Slot | - | 后缀图标。值为字符串表示图标名称，值为 `'slot'` 表示使用插槽。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标。 | N
 theme | String | info | 内置主题。可选项：info/success/warning/error | N
 visible | Boolean | false | 显示/隐藏 | N
 default-visible | Boolean | false | 显示/隐藏。非受控属性 | N
diff --git a/src/notice-bar/__test__/__snapshots__/demo.test.js.snap b/src/notice-bar/__test__/__snapshots__/demo.test.js.snap
index 092ac769b..aa1351272 100644
--- a/src/notice-bar/__test__/__snapshots__/demo.test.js.snap
+++ b/src/notice-bar/__test__/__snapshots__/demo.test.js.snap
@@ -3,8 +3,8 @@
 exports[`NoticeBar NoticeBar base demo works fine 1`] = `
 <base>
   <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述"
-    prefixIcon="null"
+    content="这是一条普通的通知信息"
+    prefixIcon="{{false}}"
     visible="{{true}}"
   />
 </base>
@@ -15,7 +15,9 @@ exports[`NoticeBar NoticeBar custom demo works fine 1`] = `
   <t-notice-bar
     content="提示文字描述提示文字描述提示文字描述"
     prefixIcon="sound"
+    suffixIcon="chevron-right"
     tClass="external-class"
+    tClassPrefixIcon="external-class-prefix-icon"
     visible="{{true}}"
   />
 </custom>
@@ -23,20 +25,6 @@ exports[`NoticeBar NoticeBar custom demo works fine 1`] = `
 
 exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
 <customization>
-  <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-    prefixIcon="null"
-    visible="{{true}}"
-  />
-  <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-    visible="{{true}}"
-  />
-  <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-    suffixIcon="chevron-right"
-    visible="{{true}}"
-  />
   <t-notice-bar
     visible="{{true}}"
   >
@@ -58,6 +46,7 @@ exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
     >
       <t-icon
         name="close"
+        size="44rpx"
       />
     </wx-view>
   </t-notice-bar>
@@ -67,11 +56,33 @@ exports[`NoticeBar NoticeBar customization demo works fine 1`] = `
 exports[`NoticeBar NoticeBar event demo works fine 1`] = `
 <event>
   <t-notice-bar
-    content="提示文字描述提示文字描述提示文字描述"
+    content="这是一条普通的通知信息"
+    suffixIcon="close"
+    visible="{{true}}"
+    bind:click="click"
+  />
+  <t-notice-bar
+    content="这是一条普通的通知信息"
     suffixIcon="chevron-right"
     visible="{{true}}"
     bind:click="click"
   />
+  <t-notice-bar
+    visible="{{true}}"
+    bind:click="click"
+  >
+    <wx-view
+      slot="content"
+    >
+       这是一条普通的通知信息 
+    </wx-view>
+    <wx-view
+      class="extra"
+      slot="extra"
+    >
+      文字按钮
+    </wx-view>
+  </t-notice-bar>
   <t-notice-bar
     suffixIcon="close"
     visible="{{true}}"
@@ -80,7 +91,7 @@ exports[`NoticeBar NoticeBar event demo works fine 1`] = `
     <wx-view
       slot="content"
     >
-       提示文字描述提示文字描述 
+       这是一条普通的通知信息 
     </wx-view>
     <wx-view
       class="extra"
@@ -134,6 +145,21 @@ exports[`NoticeBar NoticeBar scrolling demo works fine 1`] = `
     }}"
     visible="{{true}}"
   />
+  <t-notice-bar
+    content="{{
+      Array [
+        "君不见",
+        "高堂明镜悲白发",
+        "朝如青丝暮成雪",
+        "人生得意须尽欢",
+        "莫使金樽空对月",
+      ]
+    }}"
+    direction="vertical"
+    prefixIcon="sound"
+    visible="{{true}}"
+    bind:click="click"
+  />
 </scrolling>
 `;
 
diff --git a/src/notice-bar/__test__/__snapshots__/index.test.js.snap b/src/notice-bar/__test__/__snapshots__/index.test.js.snap
index 6d4d3a5e0..c61979e41 100644
--- a/src/notice-bar/__test__/__snapshots__/index.test.js.snap
+++ b/src/notice-bar/__test__/__snapshots__/index.test.js.snap
@@ -10,10 +10,14 @@ exports[`notice-bar props : marquee 1`] = `
       style=""
     >
       <wx-view
-        class="t-notice-bar__prefix-icon t-class-prefix-icon"
+        class="t-notice-bar__prefix-icon"
         bind:tap="clickPrefixIcon"
       >
-        <t-icon>
+        <t-icon
+          class=""
+          tClass="t-class-prefix-icon"
+          bind:click="onTplClick"
+        >
           <wx-view
             ariaHidden="{{false}}"
             ariaLabel=""
@@ -45,10 +49,6 @@ exports[`notice-bar props : marquee 1`] = `
         class="t-notice-bar__extra t-class-extra"
         bind:tap="clickExtra"
       />
-      <wx-view
-        class="t-notice-bar__suffix-icon t-class-suffix-icon"
-        bind:tap="clickSuffixIcon"
-      />
     </wx-view>
   </t-notice-bar>
 </main>
diff --git a/src/notice-bar/__test__/index.test.js b/src/notice-bar/__test__/index.test.js
index 0f0fe4fff..57e5bfad6 100644
--- a/src/notice-bar/__test__/index.test.js
+++ b/src/notice-bar/__test__/index.test.js
@@ -137,7 +137,7 @@ describe('notice-bar', () => {
           prefixIcon="{{prefixIcon}}"></t-notice-bar>`,
         data: {
           visible: true,
-          prefixIcon: 'null',
+          prefixIcon: false,
         },
         usingComponents: {
           't-notice-bar': noticeBar,
@@ -146,8 +146,7 @@ describe('notice-bar', () => {
 
       const comp = simulate.render(id);
       comp.attach(document.createElement('parent-wrapper'));
-      const $prefixIcon = comp.querySelector('.base >>> .t-notice-bar__prefix-icon');
-      expect($prefixIcon.dom.innerHTML).toBe('');
+      expect(comp.querySelector('.base >>> .t-notice-bar__prefix-icon')).toBeUndefined();
 
       comp.setData({
         prefixIcon: 'add',
@@ -163,7 +162,9 @@ describe('notice-bar', () => {
         },
       });
       const iconComp = simulate.render(iconId);
-      expect($prefixIcon.dom.innerHTML).toContain(iconComp.dom.innerHTML);
+      expect(comp.querySelector('.base >>> .t-notice-bar__prefix-icon').dom.innerHTML).toContain(
+        iconComp.dom.innerHTML,
+      );
     });
 
     const delay = 7100;
diff --git a/src/notice-bar/_example/base/index.wxml b/src/notice-bar/_example/base/index.wxml
index 43c8f7a1f..f51c25f03 100644
--- a/src/notice-bar/_example/base/index.wxml
+++ b/src/notice-bar/_example/base/index.wxml
@@ -1 +1 @@
-<t-notice-bar visible="{{true}}" prefixIcon="null" content="提示文字描述提示文字描述提示文字描述"></t-notice-bar>
+<t-notice-bar visible="{{true}}" prefixIcon="{{false}}" content="这是一条普通的通知信息"></t-notice-bar>
diff --git a/src/notice-bar/_example/custom/index.wxml b/src/notice-bar/_example/custom/index.wxml
index dca3dccca..3273fdcc2 100644
--- a/src/notice-bar/_example/custom/index.wxml
+++ b/src/notice-bar/_example/custom/index.wxml
@@ -1,6 +1,8 @@
 <t-notice-bar
   visible="{{true}}"
   prefixIcon="sound"
+  suffixIcon="chevron-right"
   content="提示文字描述提示文字描述提示文字描述"
   t-class="external-class"
+  t-class-prefix-icon="external-class-prefix-icon"
 ></t-notice-bar>
diff --git a/src/notice-bar/_example/custom/index.wxss b/src/notice-bar/_example/custom/index.wxss
index 0bd31dda8..5710cfed0 100644
--- a/src/notice-bar/_example/custom/index.wxss
+++ b/src/notice-bar/_example/custom/index.wxss
@@ -1,4 +1,8 @@
 .external-class {
-  color: #ffffff !important;
-  background-color: #a6a6a6 !important;
+  opacity: 1 !important;
+  background: rgba(243, 243, 243, 1) !important;
+}
+
+.external-class-prefix-icon {
+  color: rgba(0, 0, 0, 0.9) !important;
 }
diff --git a/src/notice-bar/_example/customization/index.wxml b/src/notice-bar/_example/customization/index.wxml
index edd531561..e7a789d77 100644
--- a/src/notice-bar/_example/customization/index.wxml
+++ b/src/notice-bar/_example/customization/index.wxml
@@ -1,20 +1,3 @@
-<t-notice-bar
-  visible="{{true}}"
-  prefixIcon="null"
-  content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-></t-notice-bar>
-
-<t-notice-bar
-  visible="{{true}}"
-  content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-></t-notice-bar>
-
-<t-notice-bar
-  visible="{{true}}"
-  suffixIcon="chevron-right"
-  content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
-></t-notice-bar>
-
 <!-- slot实现自定义content内容 -->
 <t-notice-bar visible="{{true}}">
   <view slot="content">
@@ -22,6 +5,6 @@
     <view class="extra" bind:tap="clickDetail"> 详情 </view>
   </view>
   <view slot="suffixIcon">
-    <t-icon name="close"></t-icon>
+    <t-icon name="close" size="44rpx"></t-icon>
   </view>
 </t-notice-bar>
diff --git a/src/notice-bar/_example/customization/index.wxss b/src/notice-bar/_example/customization/index.wxss
index ae0abbd7d..f58ef1896 100644
--- a/src/notice-bar/_example/customization/index.wxss
+++ b/src/notice-bar/_example/customization/index.wxss
@@ -1,5 +1,6 @@
 .extra {
-  display: inline-block !important;
-  font-weight: 700 !important;
-  border-bottom: 2rpx solid !important;
+  display: inline-block;
+  font-weight: 700;
+  border-bottom: 2rpx solid;
+  color: #0052d9;
 }
diff --git a/src/notice-bar/_example/event/index.wxml b/src/notice-bar/_example/event/index.wxml
index bc43f945e..a826e38fb 100644
--- a/src/notice-bar/_example/event/index.wxml
+++ b/src/notice-bar/_example/event/index.wxml
@@ -1,11 +1,23 @@
+<t-notice-bar
+  visible="{{visible}}"
+  suffixIcon="close"
+  content="这是一条普通的通知信息"
+  bind:click="click"
+></t-notice-bar>
+
 <t-notice-bar
   visible="{{visible}}"
   suffixIcon="chevron-right"
-  content="提示文字描述提示文字描述提示文字描述"
+  content="这是一条普通的通知信息"
   bind:click="click"
 ></t-notice-bar>
 
+<t-notice-bar visible="{{visible}}" bind:click="click">
+  <view slot="content"> 这是一条普通的通知信息 </view>
+  <view slot="extra" class="extra">文字按钮</view>
+</t-notice-bar>
+
 <t-notice-bar visible="{{visible}}" suffixIcon="close" bind:click="click">
-  <view slot="content"> 提示文字描述提示文字描述 </view>
+  <view slot="content"> 这是一条普通的通知信息 </view>
   <view slot="extra" class="extra">详情</view>
 </t-notice-bar>
diff --git a/src/notice-bar/_example/notice-bar.wxml b/src/notice-bar/_example/notice-bar.wxml
index 2cc4f4ab0..b2668cbae 100644
--- a/src/notice-bar/_example/notice-bar.wxml
+++ b/src/notice-bar/_example/notice-bar.wxml
@@ -1,39 +1,41 @@
 <view class="demo">
   <view class="demo-title">NoticeBar 公告栏</view>
-  <view class="demo-desc"> 在导航栏下方，用于给用户显示提示消息 </view>
-  <t-demo title="01 类型" desc="基础静态公告栏">
+  <view class="demo-desc"> 在导航栏下方，用于给用户显示提示消息。 </view>
+  <t-demo title="01 组件类型">
+    <view class="demo-section__desc">纯文字的公告栏</view>
     <view class="box">
       <base />
     </view>
 
-    <view class="demo-section__desc">带图标静态公告栏</view>
+    <view class="demo-section__desc">带图标的公告栏</view>
     <view class="box">
       <iconDemo />
     </view>
 
-    <view class="demo-section__desc">带操作公告栏</view>
+    <view class="demo-section__desc">带操作的公告栏</view>
     <view class="box">
       <event />
     </view>
 
-    <view class="demo-section__desc">滚动公告栏</view>
+    <view class="demo-section__desc">自定义样式的公告栏</view>
     <view class="box">
-      <scrolling />
+      <custom />
     </view>
 
-    <view class="demo-section__desc">自定义样式</view>
+    <view class="demo-section__desc">自定义内容的公告栏</view>
     <view class="box">
-      <custom />
+      <customization />
     </view>
   </t-demo>
-  <t-demo title="02 状态" desc="多行文字消息栏">
+  <t-demo title="02 组件状态" desc="公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）">
     <view class="box">
       <theme />
     </view>
+  </t-demo>
 
-    <view class="demo-section__desc">自定义样式</view>
+  <t-demo title="03 可滚动公告栏" desc="可滚动公告栏有水平（horizontal）和垂直（vertical）">
     <view class="box">
-      <customization />
+      <scrolling />
     </view>
   </t-demo>
 </view>
diff --git a/src/notice-bar/_example/scrolling/index.js b/src/notice-bar/_example/scrolling/index.js
index a8778f05a..a0a1ae4f0 100644
--- a/src/notice-bar/_example/scrolling/index.js
+++ b/src/notice-bar/_example/scrolling/index.js
@@ -11,5 +11,6 @@ Component({
       loop: -1,
       delay: 0,
     },
+    content: ['君不见', '高堂明镜悲白发', '朝如青丝暮成雪', '人生得意须尽欢', '莫使金樽空对月'],
   },
 });
diff --git a/src/notice-bar/_example/scrolling/index.wxml b/src/notice-bar/_example/scrolling/index.wxml
index 7374c8ebe..8a877ccad 100644
--- a/src/notice-bar/_example/scrolling/index.wxml
+++ b/src/notice-bar/_example/scrolling/index.wxml
@@ -10,3 +10,11 @@
   marquee="{{marquee2}}"
   content="提示文字描述提示文字描述提示文字描述提示文字描述文"
 ></t-notice-bar>
+
+<t-notice-bar
+  visible="{{true}}"
+  direction="vertical"
+  content="{{content}}"
+  prefixIcon="sound"
+  bind:click="click"
+></t-notice-bar>
diff --git a/src/notice-bar/notice-bar.less b/src/notice-bar/notice-bar.less
index 48ee42109..a5fe07589 100644
--- a/src/notice-bar/notice-bar.less
+++ b/src/notice-bar/notice-bar.less
@@ -1,34 +1,36 @@
 @import '../common/style/index.less';
 
-@notice-bar-height: 92rpx;
-@notice-bar-font-size: 28rpx;
-@notice-bar-horizen-padding: 32rpx;
-@notice-bar-vertical-padding: 24rpx;
+@notice-bar-font-size: @font-size-base;
+@notice-bar-horizontal-padding: 32rpx;
+@notice-bar-vertical-padding: 26rpx;
 @notice-bar-line-height: 44rpx;
-@notice-bar-icon-size: 44rpx;
-
-// color
-@notice-bar-info-background-color: #ecf2fe;
-@notice-bar-info-color: #0052d9;
-@notice-bar-success-background-color: #e8f8f2;
-@notice-bar-success-color: #00a870;
-@notice-bar-warning-background-color: #fef3e6;
-@notice-bar-warning-color: #ed7b2f;
-@notice-bar-error-background-color: #fdecee;
-@notice-bar-error-color: #e34d59;
+@notice-bar-icon-font-size: 44rpx;
+
+@notice-bar-font-color: var(--td-notice-bar-font-color, @font-gray-1); // 公告栏文本颜色
+@notice-bar-info-color: var(--td-notice-bar-info-color, @primary-color-8); // 'info' 主题色
+@notice-bar-info-bg-color: var(--td-notice-bar-info-bg-color, @gray-color-1); // 'info' 主题背景色
+@notice-bar-success-color: var(--td-notice-bar-success-color, @success-color-5); // 'success' 主题色
+@notice-bar-success-bg-color: var(--td-notice-bar-success-bg-color, @success-color-1); // 'success' 主题背景色
+@notice-bar-warning-color: var(--td-notice-bar-warning-color, @warning-color-5); // 'warning' 主题色
+@notice-bar-warning-bg-color: var(--td-notice-bar-warning-bg-color, @warning-color-1); // 'warning' 主题背景色
+@notice-bar-error-color: var(--td-notice-bar-error-color, @error-color-6); // 'error' 主题色
+@notice-bar-error-bg-color: var(--td-notice-bar-error-bg-color, @error-color-1); // 'error' 主题背景色
+@notice-bar-suffix-icon-color: var(--td-notice-bar-suffix-icon-color, @font-gray-3); // 后缀图标颜色
+@notice-bar-extra-font-color: var(--td-notice-bar-extra-font-color, @primary-color-8); // 额外信息文本颜色
 
 @notice-bar: ~'@{prefix}-notice-bar';
 
 .@{notice-bar} {
   display: flex;
   align-items: flex-start;
-  padding: @notice-bar-vertical-padding @notice-bar-horizen-padding;
+  padding: @notice-bar-vertical-padding @notice-bar-horizontal-padding;
   font-size: @notice-bar-font-size;
 
   &__content-wrap {
     flex: 1;
     overflow-x: hidden;
     line-height: @notice-bar-line-height;
+    color: @notice-bar-font-color;
   }
 
   &__content {
@@ -40,38 +42,62 @@
     white-space: normal;
   }
 
+  &__content--vertical {
+    height: @notice-bar-line-height;
+    line-height: @notice-bar-line-height;
+
+    &-item {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__prefix-icon {
+    color: inherit;
+  }
+
+  &__prefix-icon:not(:empty) {
+    padding-right: @spacer;
+  }
+
+  &__suffix-icon {
+    color: @notice-bar-suffix-icon-color;
+  }
+
   &__prefix-icon,
   &__suffix-icon {
-    font-size: 44rpx;
+    font-size: @notice-bar-icon-font-size;
   }
 
-  &__prefix-icon:not(:empty) {
-    margin-right: 16rpx;
+  &__extra {
+    color: @notice-bar-extra-font-color;
+    font-weight: 700;
   }
 
-  &__extrq:not(:empty),
+  &__extra:not(:empty),
   &__suffix-icon:not(:empty) {
-    margin-left: 16rpx;
+    padding-left: @spacer;
   }
 
   // theme
   &--info {
     color: @notice-bar-info-color;
-    background-color: @notice-bar-info-background-color;
+    background-color: @notice-bar-info-bg-color;
   }
 
   &--success {
     color: @notice-bar-success-color;
-    background-color: @notice-bar-success-background-color;
+    background-color: @notice-bar-success-bg-color;
   }
 
   &--warning {
     color: @notice-bar-warning-color;
-    background-color: @notice-bar-warning-background-color;
+    background-color: @notice-bar-warning-bg-color;
   }
 
   &--error {
     color: @notice-bar-error-color;
-    background-color: @notice-bar-error-background-color;
+    background-color: @notice-bar-error-bg-color;
   }
 }
diff --git a/src/notice-bar/notice-bar.ts b/src/notice-bar/notice-bar.ts
index 3ccfe9cb3..1fbce900e 100644
--- a/src/notice-bar/notice-bar.ts
+++ b/src/notice-bar/notice-bar.ts
@@ -6,6 +6,13 @@ import config from '../common/config';
 const { prefix } = config;
 const name = `${prefix}-notice-bar`;
 
+const THEME_ICON = {
+  info: 'error-circle-filled',
+  success: 'check-circle-filled',
+  warning: 'error-circle-filled',
+  error: 'close-circle-filled',
+};
+
 @wxComponent()
 export default class NoticeBar extends SuperComponent {
   externalClasses = [
@@ -51,7 +58,11 @@ export default class NoticeBar extends SuperComponent {
     },
 
     'prefixIcon, theme'() {
-      this.setIcon();
+      this.setPrefixIcon();
+    },
+
+    suffixIcon() {
+      this.setSuffixIcon();
     },
 
     content() {
@@ -154,7 +165,7 @@ export default class NoticeBar extends SuperComponent {
 
     show() {
       this.clearNoticeBarAnimation();
-      this.setIcon();
+      this.setPrefixIcon(this.properties.prefixIcon);
       this.initAnimation();
     },
 
@@ -164,21 +175,39 @@ export default class NoticeBar extends SuperComponent {
       this.nextAnimationContext = null;
     },
 
-    setIcon() {
+    setPrefixIcon() {
       const { prefixIcon, theme } = this.properties;
-      // 固定值
-      if (prefixIcon) {
+      if (!prefixIcon) {
+        this.setData({ prefixIconName: '', prefixIconData: {} });
+      } else if (typeof prefixIcon === 'string') {
+        this.setData({
+          prefixIconName: prefixIcon,
+          prefixIconData: {},
+        });
+      } else if (typeof prefixIcon === 'object') {
         this.setData({
-          iconName: prefixIcon !== 'null' ? `${prefixIcon}` : '',
+          prefixIconName: '',
+          prefixIconData: prefixIcon,
         });
       } else {
-        const themeNoticeBar = {
-          info: 'error-circle-filled',
-          success: 'check-circle-filled',
-          warning: 'error-circle-filled',
-          error: 'close-circle-filled',
-        };
-        this.setData({ iconName: themeNoticeBar[theme] });
+        this.setData({ prefixIconName: THEME_ICON[theme], prefixIconData: {} });
+      }
+    },
+
+    setSuffixIcon() {
+      const { suffixIcon } = this.properties;
+      if (suffixIcon) {
+        if (typeof suffixIcon === 'string') {
+          this.setData({
+            suffixIconName: suffixIcon,
+            suffixIconData: {},
+          });
+        } else if (typeof suffixIcon === 'object') {
+          this.setData({
+            suffixIconName: '',
+            suffixIconData: suffixIcon,
+          });
+        }
       }
     },
 
diff --git a/src/notice-bar/notice-bar.wxml b/src/notice-bar/notice-bar.wxml
index 75dbd44c4..985939573 100644
--- a/src/notice-bar/notice-bar.wxml
+++ b/src/notice-bar/notice-bar.wxml
@@ -1,13 +1,42 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
+
 <view wx:if="{{visible}}" style="{{ customStyle }}" class="{{classPrefix}} {{classPrefix}}--{{theme}} {{prefix}}-class">
   <!-- prefixIcon -->
-  <view class="{{classPrefix}}__prefix-icon {{prefix}}-class-prefix-icon" bind:tap="clickPrefixIcon">
-    <t-icon wx:if="{{ iconName }}" name="{{ iconName }}" />
-    <slot wx:else name="prefixIcon" />
+  <view
+    wx:if="{{prefixIconName || _.isNoEmptyObj(prefixIconData)}}"
+    class="{{classPrefix}}__prefix-icon"
+    bind:tap="clickPrefixIcon"
+  >
+    <slot wx:if="{{prefixIconName === 'slot'}}" name="prefixIcon" />
+    <template
+      wx:else
+      is="icon"
+      data="{{tClass: prefix + '-class-prefix-icon', name: prefixIconName, ...prefixIconData}}"
+    ></template>
   </view>
 
-  <!-- conten -->
+  <!-- content -->
   <view class="{{classPrefix}}__content-wrap" bind:tap="clickContent">
+    <!-- 垂直滚动通知：基于swiper实现，适用信息量短的多条公告消息，超出省略 -->
+    <view wx:if="{{ direction === 'vertical' && _.isArray(content) }}">
+      <swiper
+        autoplay="true"
+        vertical="true"
+        circular="true"
+        interval="2000"
+        display-multiple-items="1"
+        class="{{classPrefix}}__content--vertical"
+      >
+        <block wx:for="{{content}}" wx:key="index">
+          <swiper-item>
+            <view class="{{classPrefix}}__content--vertical-item"> {{item}} </view>
+          </swiper-item>
+        </block>
+      </swiper>
+    </view>
     <view
+      wx:else
       class="{{classPrefix}}__content {{prefix}}-class-content {{ !marquee ? classPrefix + '__content-wrapable' : ''}}"
       animation="{{ animationData }}"
     >
@@ -23,8 +52,16 @@
   </view>
 
   <!-- suffixIcon -->
-  <view class="{{classPrefix}}__suffix-icon {{prefix}}-class-suffix-icon" bind:tap="clickSuffixIcon">
-    <t-icon wx:if="{{ suffixIcon }}" name="{{suffixIcon}}" />
-    <slot wx:else name="suffixIcon" />
+  <view
+    wx:if="{{suffixIconName || _.isNoEmptyObj(suffixIconData)}}"
+    class="{{classPrefix}}__suffix-icon"
+    bind:tap="clickSuffixIcon"
+  >
+    <slot wx:if="{{suffixIconName === 'slot'}}" name="suffixIcon" />
+    <template
+      wx:else
+      is="icon"
+      data="{{tClass: prefix + '-class-suffix-icon', name: suffixIconName, ...suffixIconData}}"
+    ></template>
   </view>
 </view>
diff --git a/src/notice-bar/props.ts b/src/notice-bar/props.ts
index 7dd65d32b..b04c94267 100644
--- a/src/notice-bar/props.ts
+++ b/src/notice-bar/props.ts
@@ -8,7 +8,12 @@ import { TdNoticeBarProps } from './type';
 const props: TdNoticeBarProps = {
   /** 文本内容 */
   content: {
+    type: null,
+  },
+  /** 滚动方向，可选 horizontal、vertical */
+  direction: {
     type: String,
+    value: 'horizontal',
   },
   /** 自定义组件样式 */
   customStyle: {
@@ -30,13 +35,13 @@ const props: TdNoticeBarProps = {
   },
   /** 前缀图标 */
   prefixIcon: {
-    type: String,
-    value: '',
+    type: null,
+    value: true,
   },
   /** 后缀图标 */
   suffixIcon: {
-    type: String,
-    value: '',
+    type: null,
+    value: null,
   },
   /** 内置主题 */
   theme: {
diff --git a/src/notice-bar/type.ts b/src/notice-bar/type.ts
index 5a500bb6b..07a118480 100644
--- a/src/notice-bar/type.ts
+++ b/src/notice-bar/type.ts
@@ -9,8 +9,8 @@ export interface TdNoticeBarProps {
    * 文本内容
    */
   content?: {
-    type: StringConstructor;
-    value?: string;
+    type: null;
+    value?: null;
   };
   /**
    * 自定义组件样式
@@ -20,6 +20,14 @@ export interface TdNoticeBarProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 滚动方向，可选 horizontal、vertical
+   * @default horizontal
+   */
+  direction?: {
+    type: StringConstructor;
+    value?: 'horizontal' | 'vertical';
+  };
   /**
    * 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。
    */
@@ -44,19 +52,18 @@ export interface TdNoticeBarProps {
   };
   /**
    * 前缀图标
-   * @default ''
+   * @default true
    */
   prefixIcon?: {
-    type: StringConstructor;
-    value?: string;
+    type: null;
+    value?: boolean | string | object;
   };
   /**
    * 后缀图标
-   * @default ''
    */
   suffixIcon?: {
-    type: StringConstructor;
-    value?: string;
+    type: null;
+    value?: string | object;
   };
   /**
    * 内置主题