介绍
让文字无缝循环滚动。
引入
js
import Marquee from 'sard-uniapp/components/marquee/marquee.vue'代码演示
基础使用
为了实现无缝的循环滚动,需要提供两份数据。
vue
<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
<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
<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
<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
<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
<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 |