Marquee 跑马灯 🧪 实验性

跑马灯组件，用于循环播放一段文字或者一组图片。

基础用法

通过 <NueMarquee> 标签声明一个跑马灯组件。

播放类型

跑马灯组件拥有两种播放类型，一个是滚动播放，一个是轮播播放。滚动播放是指文字或图片滚动一次后，会自动返回到初始位置； 轮播播放是指文字或图片会自动切换到下一项，即第一项在跑过可视区域后会接在最后一项等待显示，看起来会像无限循环。

通过属性 infinite 设置是否为轮播播放。属性值类型为布尔类型。

设置属性 infinite 为 false 即为滚动播放。

<template>
    <nue-marquee>
        <div v-for="(item, idx) in 12" :key="idx" class="nue-marquee-item">
            {{ item }}
        </div>
    </nue-marquee>
</template>

<style scoped>
.nue-marquee-item {
    width: 80px;
    height: 80px;
    aspect-ratio: 1;
}
</style>

设置属性 infinite 为 true 即为轮播播放。

<template>
    <nue-marquee infinite>
        <div v-for="(item, idx) in 12" :key="idx" class="nue-marquee-item">
            {{ item }}
        </div>
    </nue-marquee>
</template>

<style scoped>
.nue-marquee-item {
    width: 80px;
    height: 80px;
    aspect-ratio: 1;
}
</style>

动画速度

通过 speed-ratio 属性设置速度倍率系数，值越大，速度越慢。属性接受数字类型。

<template>
    <nue-marquee :speed-ratio="32">
        <nue-text style="width: max-content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quidem voluptatem itaque
            nobis, totam recusandae maxime, sunt vero eos esse ipsam. Molestias at explicabo nulla,
            ipsum numquam magni culpa voluptates.
        </nue-text>
    </nue-marquee>
</template>