Marquee 滚动文字

介绍

Marquee 滚动文字组件包含三个不同的滚动文字组件，用于在页面中展示水平或垂直滚动的文本内容。

导入

import HorizontalScrollText from '@/components/typography/HorizontalScrollText.vue';
import VerticalScrollTexts from '@/components/typography/VerticalScrollTexts.vue';
import VerticalScrollText from '@/components/typography/VerticalScrollText.vue';

使用方法

水平滚动文字

文字在超出宽度后水平滚动。

TIP

注意：水平滚动文字组件因为小程序插槽限制，暂不支持使用插槽设置内容，需要使用 text 属性。

<template>
  <HorizontalScrollText scroll :innerStyle="{
    fontSize: '40rpx',
    fontWeight: 'bold',
    color: '#ff6700'
  }" text="季节在轮转，时间在前行，虽有不舍，但不忧伤，天气渐冷，草木枯黄，落叶落果，万物萧瑟。摒去浮华，天高地阔，安然静美。" />
</template>

垂直滚动文字

文字垂直滚动切换多条文本内容。

<template>
  <VerticalScrollTexts 
    :texts="[ 
      '山有木兮木有枝，心悦君兮君不知。',
      '人生若只如初见，何事秋风悲画扇。',
      '大鹏一日同风起，扶摇直上九万里。'
    ]" 
    :interval="2000" 
    :innerStyle="{
      fontSize: '40rpx',
      fontWeight: 'bold',
      color: '#ff6700'
    }" 
  />
</template>

数字切换滚动文字

数字切换时，每个文字有不同的滚动方向动画。

<template>
  <VerticalScrollText 
    :numberString="valueTest.toFixed()" 
    :innerStyle="{
      fontSize: '40rpx',
      fontWeight: 'bold',
      color: '#ff6700'
    }" 
  />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { SimpleTimer } from '@imengyu/imengyu-utils';

const valueTest = ref(999999);
const changeValue = new SimpleTimer(undefined, () => {
  valueTest.value = Math.random() * 999999;
}, 3000);

onMounted(() => {
  changeValue.start();
});

onBeforeUnmount(() => {
  changeValue.stop();
});
</script>

API 参考

HorizontalScrollText

水平滚动文字组件。

Props

名称	说明	类型	必填	默认值
animDuration	动画持续时间(ms)	number	-	25000
scroll	是否启用滚动	boolean	-	true
outerStyle	外层容器样式	ViewStyle	-	-
direction	滚动方向	'left'|'right'	-	'left'
...	继承自 Text 组件的所有属性	TextProps	-	-

Slots

名称	说明
default	要滚动显示的文字内容

VerticalScrollTexts

垂直滚动切换多条文本的组件。

Props

名称	说明	类型	必填	默认值
texts	要滚动显示的文字数组	string[]	-	[]
interval	切换间隔时间(ms)	number	-	2000
...	继承自 VerticalScrollOneText 组件的所有属性	VerticalScrollOneTextProps	-	-

VerticalScrollText

数字切换滚动文字组件。

Props

名称	说明	类型	必填	默认值
numberString	要显示的数字字符串	string	-	-
viewProps	文字容器属性	FlexProps	-	-
...	继承自 VerticalScrollOneText 组件的所有属性	VerticalScrollOneTextProps	-	-

VerticalScrollOneText

垂直滚动切换单个文字的基础组件。

Props

名称	说明	类型	必填	默认值
oneStr	单个文字内容	string	-	''
animDuration	动画时长(ms)	number	-	230
animDirection	动画方向	'down'|'up'|'auto'	-	'auto'
...	继承自 Text 组件的所有属性	TextProps	-	-

主题变量

Marquee 滚动文字组件使用了 Text 组件的主题变量，具体可参考 Text 组件的主题变量。