介绍

让文字无缝循环滚动。

引入

import Marquee from 'sard-uniapp/components/marquee/marquee.vue'

代码演示

基础使用

为了实现无缝的循环滚动，需要提供两份数据。

vue lang="ts"

<template>
  <sar-marquee root-style="height: 200rpx">
    <view
      v-for="(item, i) in data"
      :key="i"
      style="
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
      "
    >
      <view>{{ item }}</view>
      <view>06-18</view>
    </view>
  </sar-marquee>
</template>

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

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

const data = ref([...genData(), ...genData()])
</script>

vue lang="js"

<template>
  <sar-marquee root-style="height: 200rpx">
    <view
      v-for="(item, i) in data"
      :key="i"
      style="
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
      "
    >
      <view>{{ item }}</view>
      <view>06-18</view>
    </view>
  </sar-marquee>
</template>

<script setup lang="js">
import { ref } from "vue";
const genData = () => {
  return "\u8D75\u94B1\u5B59\u674E\u5468\u5434\u90D1\u738B".split("").map((item) => `\u606D\u559C${item}**\u83B7\u5F97\u4E30\u539A\u5956\u54C1`);
};
const data = ref([...genData(), ...genData()]);
</script>

异步数据

Marquee 组件是通过 animation 来实现高效的滚动动画的， 会根据内容高度或宽度动态设置动画时长，以实现固定速率滚动。

INFO

在 ^1.20之前，如果 Marquee 挂载时机比插槽内容靠前，即插槽内容数据需要通过接口异步获取再渲染的， 需要手动调用 update 方法来更新动画时长。

在 ^1.20之后，会监听内容尺寸变化，自动调用更新方法，无需手动调用。

vue lang="ts"

<template>
  <sar-marquee root-style="height: 200rpx">
    <view
      v-for="(item, i) in data"
      :key="i"
      style="
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
      "
    >
      <view>{{ item }}</view>
      <view>06-18</view>
    </view>
  </sar-marquee>
</template>

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

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

const data = ref<string[]>([])

onMounted(() => {
  setTimeout(() => {
    data.value = [...genData(), ...genData()]
  }, 500)
})
</script>

vue lang="js"

<template>
  <sar-marquee root-style="height: 200rpx">
    <view
      v-for="(item, i) in data"
      :key="i"
      style="
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
      "
    >
      <view>{{ item }}</view>
      <view>06-18</view>
    </view>
  </sar-marquee>
</template>

<script setup lang="js">
import { onMounted, ref } from "vue";
const genData = () => {
  return "\u8D75\u94B1\u5B59\u674E\u5468\u5434\u90D1\u738B".split("").map((item) => `\u606D\u559C${item}**\u83B7\u5F97\u4E30\u539A\u5956\u54C1`);
};
const data = ref([]);
onMounted(() => {
  setTimeout(() => {
    data.value = [...genData(), ...genData()];
  }, 500);
});
</script>

水平方向

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

vue lang="ts"

<template>
  <sar-marquee direction="horizontal" :speed="100">
    <view
      v-for="(item, i) in data"
      :key="i"
      style="flex: none; margin-right: 16rpx"
    >
      <view>{{ item }}</view>
    </view>
  </sar-marquee>
</template>

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

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

const data = ref([...genData(), ...genData()])
</script>

vue lang="js"

<template>
  <sar-marquee direction="horizontal" :speed="100">
    <view
      v-for="(item, i) in data"
      :key="i"
      style="flex: none; margin-right: 16rpx"
    >
      <view>{{ item }}</view>
    </view>
  </sar-marquee>
</template>

<script setup lang="js">
import { ref } from "vue";
const genData = () => {
  return "\u8D75\u94B1\u5B59\u674E\u5468\u5434\u90D1\u738B".split("").map((item) => `\u606D\u559C${item}**\u83B7\u5F97\u4E30\u539A\u5956\u54C1`);
};
const data = ref([...genData(), ...genData()]);
</script>

API

MarqueeProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
direction	动画滚动方向	'vertical' | 'horizontal'	'vertical'
speed	滚动速率 (px/s)	number	50
delay	挂载后，延迟动画时间（单位 ms），避免进入页面时卡顿	number	1000

MarqueeSlots

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

MarqueeExpose

属性	描述	类型
update	重置滚动时长	() => void