NoticeBar 通知栏

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='通知 公告' class="p.30">
		<t-card class='tdr-tdb-mb.30' title="Noticon 通知 消息公告" sub-title="自研滚动实现,纵向消息也支持动画时长滚动速度设置"></t-card>
		<t-section class='tdr-tdb-mb.30' title='基础功能+主题展示+图标+速度'></t-section>
		<t-notice-bar class="mb.30" prefixIcon="volume-up" type="p" :duration="6000" :barList="noticeBarList"
			suffixIcon="map"></t-notice-bar>
		<t-section class='tdr-tdb-mb.30' title='主题展示-浅色'></t-section>
		<t-notice-bar class="mb.30" prefixIcon="volume-up" type="s" :duration="10000" effect='l'
			:barList="noticeBarList" suffixIcon="map"></t-notice-bar>
		<t-section class='tdr-tdb-mb.30' title='主题展示-镂空'></t-section>
		<t-notice-bar class="mb.30" prefixIcon="volume-up" type="w" effect='p' :duration="5000" :barList="noticeBarList"
			suffixIcon="map"></t-notice-bar>
		<t-notice-bar class="mb.30-bw.0" prefixIcon="volume-up" type="i" effect='p' :duration="5000"
			:barList="noticeBarList" suffixIcon="map"></t-notice-bar>
		<t-section class='tdr-tdb-mb.30' title='主题展示-迷你-超大'></t-section>
		<t-notice-bar class="mb.30" prefixIcon="volume-up" type="error" :barList="noticeBarList" suffixIcon="map"
			size="mini"></t-notice-bar>
		<t-notice-bar class="mb.30" prefixIcon="volume-up" :duration="10000" type="s" :barList="noticeBarList"
			suffixIcon="map" size="l"></t-notice-bar>
		<t-section class='tdr-tdb-mb.30' title='步进模式-主题-尺寸'></t-section>
		<t-notice-bar class="mb.30" prefixIcon="volume-up" :duration="1000" :interval="3000" type="s"
			:barList="noticeBarList1" size="mini" suffixIcon="map" :step="true"></t-notice-bar>
		<t-notice-bar class="mb.30" prefixIcon="volume-up" :duration="1000" type="s" :interval="3000"
			:barList="noticeBarList1" effect='p' size="s" suffixIcon="map" :step="true"></t-notice-bar>
		<t-notice-bar class="mb.30" prefixIcon="volume-up" :vertical="true" :interval="3000" :duration="3000" type="p"
			effect='l' :barList="noticeBarList1" suffixIcon="map" :step="true"></t-notice-bar>
	</t-page>
</template>

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

<style lang="scss">

</style>

Props

名称	描述	类型	默认值
type	消息类型	String	'info'
barList	消息列表	String[]	[]
interval	滚动间隔，单位为毫秒	Number	100
duration	滚动持续时间，单位为毫秒	Number	3000
vertical	是否纵向滚动	Boolean	false
step	是否步进滚动	Boolean	false
prefixIcon	前置图标的名称	String	''
prefixClass	前置图标的额外类名	String	''
suffixIcon	后置图标的名称	String	''
suffixIconClass	后置图标的额外类名	String	''

Events

事件名	描述	回调参数	版本