NoticeBar 通告栏，一般用作系统提醒、活动提醒等通知。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

单行展示

通过 padding 属性设置通告栏左右 padding 值，content 属性设置通告栏内容，single 属性设置通告栏是否单行显示（超出内容隐藏）。

<wui-notice-bar :padding="['0','32rpx']" :content="content" single></wui-notice-bar>

content: 'wlyyui 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'

文字滚动

通过 content 属性设置通告栏内容，scrollable 属性设置通告栏是否滚动显示。

<wui-notice-bar :content="content" scrollable></wui-notice-bar>

content: 'wlyyui 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'

加图标/控制速度

通过 content 属性设置通告栏内容，speed 属性控制文字滚动速度，scrollable 属性设置通告栏是否滚动显示。

<wui-notice-bar :content="content" :speed="200" scrollable>
<view class="wui-icon__box">
  <wui-icon name="notice" :size="36" color="#FF2B2B"></wui-icon>
</view>
</wui-notice-bar>

.wui-icon__box {
	padding-left: 24rpx;
	padding-right: 12rpx;
}

content: 'wlyyui 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'

Slots

插槽名称	说明
default	通告栏内容左侧自定义内容
right	通告栏内容右侧自定义内容

Props

属性名	类型	说明	默认值	平台差异说明
height	Number, String	通告栏高度，单位rpx	72	-
content	String	通告栏内容	-	-
size	Number, String	通告栏字体大小，单位rpx	28	-
color	String	通告栏字体颜色	#FF2B2B	非Nvue端默认为空，可通过css变量（--wui-color-danger）来改变颜色值
bold	Boolean	通告栏字体是否加粗	false	-
background	String	通告栏背景色	rgba(255, 43, 43, .05)	-
padding	Array	通告栏padding值，['20rpx','30rpx','20rpx','30rpx']=>[上，右，下，左]	[ ]	-
single	Boolean	通告栏是否单行显示	false	-
scrollable	Boolean	通告栏是否滚动显示，设置为true时single效果失效	false	-
speed	Number, String	通告栏每秒滚动速度（距离），默认 100px/s	100	-
activeMode	String	通告栏滚动方式，可选值：backwards（动画从头开始播）、forwards（动画从结束点开始播）	backwards	-
param	Number, String	自定义参数，事件回调中回传	0	-

Events

事件名	说明	回调参数
@click	点击通告栏内容时触发	{ param:this.param }
@leftClick	点击通告栏左侧自定义内容时触发	{ param:this.param }
@rightClick	点击通告栏右侧自定义内容时触发	{ param:this.param }