Vue实现几行滚动
Vue 实现多行文本滚动
使用 Vue 实现多行文本滚动可以通过 CSS 动画或 JavaScript 动态控制。以下是两种常见方法：
CSS 动画实现
通过 CSS 的 @keyframes 和 transform 属性实现垂直滚动效果：
<template>
<div class="scroll-container">
<div class="scroll-content">
<p v-for="(item, index) in items" :key="index">{{ item }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['第一行内容', '第二行内容', '第三行内容']
}
}
}
</script>
<style>
.scroll-container {
height: 100px;
overflow: hidden;
position: relative;
}
.scroll-content {
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% { transform: translateY(0); }
100% { transform: translateY(-100%); }
}
</style>JavaScript 动态控制
通过定时器动态修改滚动位置，实现更灵活的控制：
<template>
<div class="scroll-container" ref="scrollContainer">
<div class="scroll-content" ref="scrollContent">
<p v-for="(item, index) in items" :key="index">{{ item }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['第一行内容', '第二行内容', '第三行内容'],
scrollPosition: 0
}
},
mounted() {
this.startScrolling()
},
methods: {
startScrolling() {
setInterval(() => {
this.scrollPosition -= 1
if (this.scrollPosition <= -this.$refs.scrollContent.clientHeight) {
this.scrollPosition = 0
}
this.$refs.scrollContent.style.transform = `translateY(${this.scrollPosition}px)`
}, 50)
}
}
}
</script>
<style>
.scroll-container {
height: 100px;
overflow: hidden;
position: relative;
}
.scroll-content {
transition: transform 0.1s linear;
}
</style>使用第三方库
若需更复杂功能（如无缝循环），可考虑使用专门库如 vue-seamless-scroll：
-
安装库：
npm install vue-seamless-scroll -
实现代码：
<template> <vue-seamless-scroll :data="items" :class-option="options"> <p v-for="(item, index) in items" :key="index">{{ item }}</p> </vue-seamless-scroll> </template>
