当前位置：首页 > VUE

vue实现文字上下滚动

2026-02-21 08:28:35VUE

实现文字上下滚动的 Vue 方法

使用 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: ['内容1', '内容2', '内容3', '内容4']
    };
  }
};
</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 动态控制

通过定时器动态修改样式，适合需要动态更新内容的场景。

vue实现文字上下滚动

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" :style="{ transform: `translateY(${offset}px)` }">
      <p v-for="(item, index) in items" :key="index">{{ item }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['动态内容1', '动态内容2', '动态内容3'],
      offset: 0,
      timer: null
    };
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    startScroll() {
      const containerHeight = this.$refs.container.clientHeight;
      const contentHeight = this.$refs.container.querySelector('.scroll-content').clientHeight;

      this.timer = setInterval(() => {
        this.offset -= 1;
        if (this.offset <= -contentHeight) {
          this.offset = containerHeight;
        }
      }, 50);
    }
  }
};
</script>

<style>
.scroll-container {
  height: 100px;
  overflow: hidden;
  position: relative;
}
</style>

使用第三方库（如 vue-seamless-scroll）

对于复杂需求，可直接使用封装好的滚动组件。

vue实现文字上下滚动

安装依赖：
```
npm install vue-seamless-scroll
```

示例代码：


<template>
<vue-seamless-scroll :data="items" :class-option="options" class="scroll-wrap">
 <ul>
   <li v-for="(item, index) in items" :key="index">{{ item }}</li>
 </ul>
</vue-seamless-scroll>
</template>

import vueSeamlessScroll from 'vue-seamless-scroll'; export default { components: { vueSeamlessScroll }, data() { return { items: ['无缝滚动1', '无缝滚动2', '无缝滚动3'], options: { direction: 2, // 0向下 1向上 2向左 3向右 step: 0.5, // 速度 limitMoveNum: 2 // 起始滚动量 } }; } }; .scroll-wrap { height: 100px; overflow: hidden; } ```