vue实现文字播放栏
实现文字播放栏的基本思路
在Vue中实现文字播放栏（如跑马灯效果或滚动公告）通常涉及动态更新文本位置或内容，结合CSS动画或JavaScript定时器控制滚动效果。以下是两种常见实现方式：
使用CSS动画实现横向滚动
通过CSS的@keyframes定义动画，结合transform: translateX实现横向滚动效果：
<template>
<div class="marquee-container">
<div class="marquee-content" :style="marqueeStyle">
{{ text }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
text: "这是一条需要横向滚动的文字内容，可以自定义长度和速度。",
duration: 10 // 动画持续时间（秒）
};
},
computed: {
marqueeStyle() {
return {
animation: `marquee ${this.duration}s linear infinite`
};
}
}
};
</script>
<style>
.marquee-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
padding-left: 100%; /* 初始位置在右侧 */
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>使用定时器实现纵向轮播
通过setInterval定时更新显示的内容，实现垂直方向的文字轮播：
<template>
<div class="vertical-marquee">
<div class="content-item" v-for="(item, index) in visibleItems" :key="index">
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ["公告1：内容1", "公告2：内容2", "公告3：内容3"],
currentIndex: 0,
visibleCount: 1 // 同时显示的行数
};
},
computed: {
visibleItems() {
return this.items.slice(
this.currentIndex,
this.currentIndex + this.visibleCount
);
}
},
mounted() {
setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.items.length;
}, 2000); // 每2秒切换一次
}
};
</script>
<style>
.vertical-marquee {
height: 1.2em; /* 单行高度 */
overflow: hidden;
}
</style>动态内容与暂停控制
增加鼠标悬停暂停功能，并支持动态更新内容：
<template>
<div
class="marquee"
@mouseenter="pause"
@mouseleave="resume"
>
<div :style="{ transform: `translateX(${offset}px)` }">
{{ text }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
text: "可动态更新的滚动文字",
offset: 0,
speed: -1, // 像素/帧
animationId: null,
isPaused: false
};
},
methods: {
updatePosition() {
if (this.isPaused) return;
this.offset += this.speed;
if (this.offset < -this.$el.offsetWidth) {
this.offset = this.$el.offsetWidth;
}
this.animationId = requestAnimationFrame(this.updatePosition);
},
pause() {
this.isPaused = true;
},
resume() {
this.isPaused = false;
this.updatePosition();
}
},
mounted() {
this.updatePosition();
},
beforeDestroy() {
cancelAnimationFrame(this.animationId);
}
};
</script>
<style>
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
</style>注意事项
- 性能优化：CSS动画性能通常优于JavaScript定时器，优先考虑CSS方案。
- 响应式设计：通过监听容器宽度变化动态调整动画参数（可使用
ResizeObserver）。 - 内容更新：如果文字内容需要动态更新，需重置动画状态或重新计算滚动位置。
- 无障碍访问：为滚动内容添加
aria-live="polite"属性，辅助设备可感知内容变化。
以上方案可根据实际需求组合使用，例如同时实现横向滚动和内容轮播。
