# t-notice-bar

NoticeBar 通知栏

t-notice-bar 组件介绍

通知栏组件，支持多种主题、尺寸和滚动模式，适用于在应用中展示重要通知或公告信息。

t-notice-bar 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-notice-bar 基础用法

基础用法参考 demo/notice-bar/notice-bar.uvue，支持主题、尺寸、滚动模式与步进模式配置。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="r-10 mb-15"
				title="Noticon 通知 消息公告"
				sub-title="自研滚动实现,纵向消息也支持动画时长滚动速度设置"></t-card>

		<t-section class="r-10 mb-15"
				   title='基础功能+主题展示+图标+速度'></t-section>
		<t-notice-bar class="mb-15"
					  prefixIcon="volume-up"
					  type="primary"
					  :barList="noticeBarList"
					  suffixIcon="map"></t-notice-bar>

		<t-section class="r-10 mb-15"
				   title='主题展示-浅色'></t-section>
		<t-notice-bar class="mb-15"
					  prefixIcon="volume-up"
					  type="primary"
					  :duration="10000"
					  effect="light"
					  :barList="noticeBarList"
					  suffixIcon="map"></t-notice-bar>

		<t-section class="r-10 mb-15"
				   title='主题展示-镂空'></t-section>
		<t-notice-bar class="mb-15"
					  prefixIcon="volume-up"
					  type="warning"
					  effect="plain"
					  :duration="5000"
					  :barList="noticeBarList"
					  suffixIcon="map"></t-notice-bar>
		<t-notice-bar class="mb-15-bw-0"
					  prefixIcon="volume-up"
					  type="info"
					  effect="plain"
					  :duration="5000"
					  :barList="noticeBarList"
					  suffixIcon="map"></t-notice-bar>

		<t-section class="r-10 mb-15"
				   title='主题展示-迷你-超大'></t-section>
		<t-notice-bar class="mb-15"
					  prefixIcon="volume-up"
					  type="error"
					  :barList="noticeBarList"
					  suffixIcon="map"
					  size="mini"></t-notice-bar>
		<t-notice-bar class="mb-15"
					  prefixIcon="volume-up"
					  prefix-class="ats-1.5"
					  suffix-class="ats-1.5"
					  :duration="10000"
					  type="success"
					  :barList="noticeBarList"
					  suffixIcon="map"
					  size="large"></t-notice-bar>

		<t-section class="r-10 mb-15"
				   title='步进模式-主题-尺寸'></t-section>
		<t-notice-bar class="mb-15"
					  prefixIcon="volume-up"
					  :duration="500"
					  :interval="3000"
					  type="primary"
					  :barList="noticeBarList1"
					  size="mini"
					  suffixIcon="map"
					  :step="true"></t-notice-bar>
		<t-notice-bar class="mb-15"
					  prefixIcon="volume-up"
					  :duration="500"
					  type="primary"
					  :interval="3000"
					  :barList="noticeBarList1"
					  effect="plain"
					  size="small"
					  suffixIcon="map"
					  :step="true"></t-notice-bar>
		<t-notice-bar class="mb-15"
					  prefixIcon="volume-up"
					  :vertical="true"
					  :interval="3000"
					  :duration="300"
					  type="primary"
					  effect="light"
					  :barList="noticeBarList1"
					  suffixIcon="map"
					  :step="true"></t-notice-bar>
	</view>
</template>

<script setup>
	const noticeBarList1 : string[] = [
		'T-UI基于UNIAPP-X开发优秀的前端组件库',
		'Android端编译为kotlin',
		'iOS端编译为swift',
		'web平台，编译为JavaScript',
		'完全不使用js引擎、webview',
		'性能完全达到了原生应用的功能'
	]

	const noticeBarList : string[] = [
		'T-UVVE-UI基于UNIAPP-X开发优秀的前端组件库',
		'在Android端编译为kotlin，在iOS端编译为swift，在web平台，编译为JavaScript',
		'在APP端完全不使用js引擎、webview，性能完全达到了原生应用的功能'
	]
</script>

t-notice-bar Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
barList	Array	[]	消息列表	-
interval	Number	100	滚动间隔，单位为毫秒	-
duration	Number	12000	滚动持续时间，单位为毫秒	-
vertical	Boolean	false	是否纵向滚动	true, false
step	Boolean	false	是否步进滚动	true, false
prefixIcon	String	""	前置图标的名称	-
prefixClass	String	""	前置图标的样式	-
suffixIcon	String	""	后置图标的名称	-
suffixClass	String	""	后置图标的样式	-
speed	Number	1	公告滚动速度，横向滚动时生效	-

t-notice-bar Events

事件名	说明	回调参数
select	点击公告时触发	当前点击公告的索引
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象