t-marquee

Marquee 跑马灯

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <t-marquee 
    :list="marqueeList" 
    :speed="1" 
    :loop="true"
    :lineHeight="30">
  </t-marquee>
</template>

<script setup>
const marqueeList = [
  [
    { text: '重要公告：', color: '#ff0000', fontSize: 16, x: 0 },
    { text: '系统将于今晚 22:00 进行维护升级', color: '#333333', fontSize: 16, x: 80 }
  ],
  [
    { text: '活动通知：', color: '#ff6600', fontSize: 16, x: 0 },
    { text: '双十一大促即将开始，敬请期待！', color: '#333333', fontSize: 16, x: 80 }
  ],
  [
    { text: '温馨提示：', color: '#0099ff', fontSize: 16, x: 0 },
    { text: '请及时更新您的个人信息', color: '#333333', fontSize: 16, x: 80 }
  ]
]
</script>

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	''

list 数据结构

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

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