# tui-notice-bar 通告栏会员组件

介绍

通告栏：用于循环播放展示一组消息通知。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiNoticeBar from "@/components/thorui/tui-notice-bar/tui-notice-bar.vue"
export default {
	components:{
		tuiNoticeBar
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
✓	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-notice-bar": "/components/thorui/tui-notice-bar/tui-notice-bar"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

单行展示

通过 padding 属性设置通告栏padding值（scrollable为false时使用），single 属性设置是否为单行显示，超出隐藏，content 属性设置通告栏文本内容。

<!--uni-app-->
<tui-notice-bar :padding="['0','30rpx']" single :content="content"></tui-notice-bar>

<!--微信小程序-->
 <tui-notice-bar padding="{{['0','30rpx']}}" single content="{{content}}"></tui-notice-bar>

滚动通告栏

通过 scrollable 属性设置是否滚动（添加后控制单行效果取消），is-left 属性控制是否需要左侧slot内容。

<!--uni-app-->
<tui-notice-bar is-left scrollable color="#f54f46" :content="content">
	<template v-slot:left>
		<view class="tui-padding">
			<tui-icon name="news-fill" :size="48" unit="rpx" color="#f54f46"></tui-icon>
		</view>
	</template>
</tui-notice-bar>

<!--微信小程序-->
<tui-notice-bar is-left scrollable color="#f54f46" content="{{content}}">
  <view class="tui-padding" slot="left">
	<tui-icon name="news-fill" size="{{48}}" unit="rpx" color="#f54f46"></tui-icon>
  </view>
</tui-notice-bar>

# Slots

插槽名称	说明
left	通告栏左侧显示内容
right	通告栏右侧显示内容

# Props

属性名	类型	说明	默认值
height	[Number, String]	通告栏高度，单位rpx	72
content	String	通告栏文本内容	-
size	[Number, String]	通告栏字体大小，单位rpx	28
color	String	通告栏字体颜色	#ff7900
bold	Boolean	通告栏字体是否加粗	false
backgroundColor	String	通告栏背景色	#fff8d5
padding	Array	scrollable为false时使用,['20rpx','30rpx','20rpx','30rpx']=>[上，右，下，左],为了兼容nvue	[ ]
single	Boolean	是否单行显示	false
scrollable	Boolean	是否滚动，添加后控制单行效果取消	false
speed	Number	每秒滚动速度（距离）默认 100px/s	100
activeMode	String	backwards: 动画从头开始播；forwards：动画从结束点开始播	backwards
isLeft	Boolean	是否需要左侧slot内容	false
isRight	Boolean	是否需要右侧slot内容	false
isFixed	Boolean	是否固定在顶部	false
top	String	isFixed为true时top值	H5：44px，非H5：0px
params	[Number, String]	自定义参数	0

# Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	点击通告栏内容时触发	{params}
leftClick	点击通告栏左侧slot中内容时触发	{params}
rightClick	点击通告栏右侧slot中内容时触发	{params}