vue实现无缝marquee
Vue 实现无缝 Marquee 效果
无缝 Marquee（跑马灯）效果可以通过 CSS 动画或 JavaScript 动态计算位置来实现。以下是几种常见的实现方式：
使用 CSS 动画实现
通过 CSS @keyframes 和 transform 实现无缝滚动，适用于简单的文本或元素。
<template>
<div class="marquee-container">
<div class="marquee-content">
{{ text }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
text: "这是一段需要无缝滚动的文本，可以根据需求调整内容和长度。"
};
}
};
</script>
<style>
.marquee-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>动态复制内容实现无缝效果
通过复制内容并动态计算位置，确保无缝衔接。
<template>
<div class="marquee-container" ref="container">
<div class="marquee-content" :style="{ transform: `translateX(${offset}px)` }">
{{ text }} {{ text }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
text: "无缝滚动内容 ",
offset: 0,
animationId: null
};
},
mounted() {
this.startAnimation();
},
beforeDestroy() {
cancelAnimationFrame(this.animationId);
},
methods: {
startAnimation() {
const step = () => {
this.offset -= 1;
if (Math.abs(this.offset) >= this.$refs.container.scrollWidth / 2) {
this.offset = 0;
}
this.animationId = requestAnimationFrame(step);
};
step();
}
}
};
</script>
<style>
.marquee-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
}
</style>使用第三方库 vue-marquee-text-component
对于更复杂的需求，可以使用现成的 Vue 组件库，如 vue-marquee-text-component。
安装：
npm install vue-marquee-text-component使用：
<template>
<marquee-text :duration="5" :repeat="Infinity">
这是一段无缝滚动的文本内容。
</marquee-text>
</template>
<script>
import MarqueeText from 'vue-marquee-text-component';
export default {
components: {
MarqueeText
}
};
</script>注意事项
- 动态计算的方式性能更好，适合内容长度不固定的场景。
- CSS 动画简单但可能在某些浏览器中存在兼容性问题。
- 第三方库提供了更多配置选项（如速度、方向、暂停等），适合快速开发。
