# t-marquee

Marquee 跑马灯

t-marquee 组件介绍

t-marquee 是基于 Canvas 绘制的跑马灯组件，用于文本的滚动展示，常用于公告或提示信息的滚动展示。

t-marquee 平台兼容

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

t-marquee 基础用法

基础用法参考 demo/marquee/marquee.uvue，通过 list 属性配置滚动数据。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="Marquee 跑马灯"
				sub-title="canvas绘制 用于文本的滚动展示，常用于公告或提示信息。"></t-card>
		<t-marquee :list="list"
				   :speed="0.5"
				   :class="[`r-10 mb-15 tvg`]"> </t-marquee>
		<t-button type="primary"
				  @click="add">增加数据测试</t-button>
	</view>
</template>

<script setup>
	const list = ref<UTSJSONObject[][]>([
		[
			{
				x: 0,
				text: '1.张** 领取了500元',
				color: '#666',
				fontSize: 16,
			},
			{
				x: 170,
				text: '2022-8-18 20:00:00',
				color: '#ccc',
				fontSize: 16,
			}
		],
		[
			{
				x: 0,
				text: '2.李** 领取了400元',
				color: '#ff0000',
				fontSize: 16,
			},
			{
				x: 170,
				text: '2022-8-18 20:00:15',
				color: '#ff5c67',
				fontSize: 16,
			}
		],
		[
			{
				x: 0,
				text: '3.王** 领取了300元',
				color: '#666',
				fontSize: 16,
			},
			{
				x: 170,
				text: '2022-8-18 20:01:30',
				color: '#ccc',
				fontSize: 16,
			}
		],
		[
			{
				x: 0,
				text: '4.赵** 领取了600元',
				color: '#666',
				fontSize: 16,
			},
			{
				x: 170,
				text: '2022-8-18 20:02:45',
				color: '#ccc',
				fontSize: 16,
			}
		],
		[
			{
				x: 0,
				text: '5.刘** 领取了200元',
				color: '#666',
				fontSize: 16,
			},
			{
				x: 170,
				text: '2022-8-18 20:03:20',
				color: '#ccc',
				fontSize: 16,
			}
		]
	])
	function add() {
		list.value.push([
			{
				x: 0,
				text: '增加数据 领取了200元',
				color: '#666',
				fontSize: 16,
			},
			{
				x: 170,
				text: '2022-8-18 10:03:20',
				color: '#ccc',
				fontSize: 16,
			}
		])
	}
</script>

t-marquee 点击事件

组件支持触摸交互：手指按下时自动暂停滚动，松开后继续滚动，无需额外配置；点击滚动文本时触发 click 事件，回调参数为点击位置对应的项数据（UTSJSONObject），可用于公告点击跳转、弹窗提示等场景。

<template>
	<view class="p-15">
		<t-marquee :list="list"
				   :speed="0.5"
				   @click="marqueeClick"
				   :class="[`r-10 mb-15 tvg`]" />
	</view>
</template>

<script setup>
	const list = ref<UTSJSONObject[][]>([
		[
			{
				x: 0,
				text: '物业温馨提示：园区近期开展消防演练，请勿惊慌',
				color: '#666',
				fontSize: 16,
			}
		],
		[
			{
				x: 0,
				text: '社区公告：明晚 19:00 广场举行露天电影放映',
				color: '#666',
				fontSize: 16,
			}
		]
	])
	function marqueeClick(e : UTSJSONObject) {
		const text = e.getString('text')
		console.log(text)
		uni.showToast({ title: text ?? '暂无内容', icon: 'none' })
	}
</script>

t-marquee Props

属性名	说明	类型	默认值
list	滚动数据配置	UTSJSONObject[][]	[]
speed	滚动速度	number	0.5
lineHeight	文本行高	number	30
loop	是否循环滚动	boolean	true
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	''
size	组件尺寸	string	''

t-marquee Events

事件名	说明	回调参数
click	点击滚动文本时触发，手指按下会暂停滚动	点击位置对应的项数据（UTSJSONObject）

list 数据结构

list 是一个二维数组，每个元素代表一行，每行包含多个文本对象：

interface MarqueeItem {
  text: string      // 文本内容
  color?: string    // 文本颜色
  fontSize?: number // 字体大小
  x?: number        // X 坐标偏移
}