vue实现无缝marquee
Vue 实现无缝 Marquee 效果
无缝 Marquee（跑马灯）效果在 Vue 中可以通过 CSS 动画或 JavaScript 动态控制实现。以下是两种常见方法：
方法一：使用 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-wrapper" ref="wrapper">
<div class="marquee-inner" :style="{ transform: `translateX(${offset}px)` }">
<span v-for="(item, index) in 2" :key="index">{{ content }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
content: "重复内容实现无缝滚动效果 ",
offset: 0,
speed: 2,
requestId: null
};
},
mounted() {
this.startAnimation();
},
beforeDestroy() {
cancelAnimationFrame(this.requestId);
},
methods: {
startAnimation() {
const animate = () => {
this.offset -= this.speed;
if (Math.abs(this.offset) >= this.$refs.wrapper.offsetWidth) {
this.offset = 0;
}
this.requestId = requestAnimationFrame(animate);
};
animate();
}
}
};
</script>
<style>
.marquee-wrapper {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.marquee-inner {
display: inline-block;
}
</style>方法三：使用第三方库
安装 vue-marquee-text-component 快速实现：
npm install vue-marquee-text-component<template>
<marquee-text :duration="10" :repeat="Infinity">
{{ text }}
</marquee-text>
</template>
<script>
import MarqueeText from 'vue-marquee-text-component';
export default {
components: { MarqueeText },
data() {
return {
text: "通过第三方库快速实现跑马灯效果"
};
}
};
</script>注意事项
- 动态宽度内容需监听
resize事件调整动画参数 - 大量内容滚动时建议使用
will-change: transform优化性能 - 移动端注意兼容
requestAnimationFrame和触摸事件冲突
以上方法可根据实际需求选择，CSS 动画适合简单场景，动态控制更灵活，第三方库能快速集成复杂功能。
