介绍

使用 animation 来实现高效的无缝滚动动画，会根据内容高度或宽度动态设置动画时长，以实现固定速率滚动。

代码演示

基础使用

当内容高度超过容器高度时，会被拷贝一份，并进行无缝滚动。

vue ts

<template>
  <s-marquee style="height: 100px">
    <div
      v-for="(item, i) in data"
      :key="i"
      style="display: flex; justify-content: space-between; margin-bottom: 8px"
    >
      <div>{{ item }}</div>
      <div>06-18</div>
    </div>
  </s-marquee>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const genData = () => {
  return '赵钱孙李周吴郑王'.split('').map((item) => `恭喜${item}**获得丰厚奖品`)
}

const data = ref(genData())
</script>

vue js

<template>
  <s-marquee style="height: 100px">
    <div
      v-for="(item, i) in data"
      :key="i"
      style="display: flex; justify-content: space-between; margin-bottom: 8px"
    >
      <div>{{ item }}</div>
      <div>06-18</div>
    </div>
  </s-marquee>
</template>

<script setup lang="js">
import { ref } from 'vue'
const genData = () => {
  return '赵钱孙李周吴郑王'.split('').map((item) => `恭喜${item}**获得丰厚奖品`)
}
const data = ref(genData())
</script>

水平方向

可以设置 direction="horizontal" 属性实现水平方向的滚动。

vue ts

<template>
  <s-marquee direction="horizontal" :speed="100">
    <div v-for="(item, i) in data" :key="i" style="flex: none; margin-inline-end: 8px">
      <div>{{ item }}</div>
    </div>
  </s-marquee>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const genData = () => {
  return '赵钱孙李周吴郑王'.split('').map((item) => `恭喜${item}**获得丰厚奖品`)
}

const data = ref(genData())
</script>

vue js

<template>
  <s-marquee direction="horizontal" :speed="100">
    <div v-for="(item, i) in data" :key="i" style="flex: none; margin-inline-end: 8px">
      <div>{{ item }}</div>
    </div>
  </s-marquee>
</template>

<script setup lang="js">
import { ref } from 'vue'
const genData = () => {
  return '赵钱孙李周吴郑王'.split('').map((item) => `恭喜${item}**获得丰厚奖品`)
}
const data = ref(genData())
</script>

动态数据

Marquee 实时监听内容和容器的尺寸，来决定是否滚动以及动画时长。

vue ts

<template>
  <s-marquee style="height: 100px">
    <div
      v-for="(item, i) in list"
      :key="i"
      style="display: flex; justify-content: space-between; margin-bottom: 8px"
    >
      <div>{{ item }}</div>
      <div>06-18</div>
    </div>
  </s-marquee>

  <s-slider v-model="count" :min="0" :max="10" show-scale class="mt-6" />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const count = ref(5)

const list = computed(() => {
  return Array(count.value)
    .fill(0)
    .map((_, i) => {
      return `[${i + 1}] 获得丰厚奖品`
    })
})
</script>

vue js

<template>
  <s-marquee style="height: 100px">
    <div
      v-for="(item, i) in list"
      :key="i"
      style="display: flex; justify-content: space-between; margin-bottom: 8px"
    >
      <div>{{ item }}</div>
      <div>06-18</div>
    </div>
  </s-marquee>

  <s-slider v-model="count" :min="0" :max="10" show-scale class="mt-6" />
</template>

<script setup lang="js">
import { computed, ref } from 'vue'
const count = ref(5)
const list = computed(() => {
  return Array(count.value)
    .fill(0)
    .map((_, i) => {
      return `[${i + 1}] 获得丰厚奖品`
    })
})
</script>

国家滚动

在有限空间下需要完整展示内容时，可以通过滚动的方式来拼凑完整内容。

在下面案例案例中，当国家名称过长而超过容器宽度时，会被拷贝一份，并进行滚动。

vue ts

<template>
  <div class="grid grid-cols-4 gap-y-2 gap-x-3">
    <div
      v-for="name in countryNamesCN"
      class="flex justify-center py-1 px-2 border border-amber-600"
    >
      <s-marquee direction="horizontal" :speed="50">
        <div class="mx-1 text-sm">{{ name }}</div>
      </s-marquee>
    </div>
  </div>
</template>

<script setup lang="ts">
import { countryNamesCN } from '@/data/countryNames'
</script>

vue js

<template>
  <div class="grid grid-cols-4 gap-y-2 gap-x-3">
    <div
      v-for="name in countryNamesCN"
      class="flex justify-center py-1 px-2 border border-amber-600"
    >
      <s-marquee direction="horizontal" :speed="50">
        <div class="mx-1 text-sm">{{ name }}</div>
      </s-marquee>
    </div>
  </div>
</template>

<script setup lang="js">
import { countryNamesCN } from '@/data/countryNames'
</script>

API

MarqueeProps

属性	描述	类型	默认值
direction	动画滚动方向	'vertical' | 'horizontal'	'vertical'
speed	滚动速率 (px/s)	number	50

MarqueeSlots

插槽	描述	属性
default	自定义默认内容	-