当前位置：首页 > VUE

Vue实现几行滚动

2026-03-07 22:02:12VUE

Vue 实现多行文本滚动

使用 Vue 实现多行文本滚动可以通过 CSS 动画或 JavaScript 动态控制。以下是两种常见方法：

CSS 动画实现

通过 CSS 的 @keyframes 和 transform 属性实现垂直滚动效果：

Vue实现几行滚动

<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：

Vue实现几行滚动

安装库：
```
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>

import vueSeamlessScroll from 'vue-seamless-scroll' export default { components: { vueSeamlessScroll }, data() { return { items: ['第一行内容', '第二行内容', '第三行内容'], options: { direction: 1, // 0向下 1向上 2向左 3向右 step: 0.5, // 步长 limitMoveNum: 2 // 起始渲染量 } } } } ```