当前位置：首页 > VUE

vue实现文字滚动

2026-02-19 00:54:04VUE

Vue 实现文字滚动效果

使用 CSS 动画实现

通过 CSS 的 @keyframes 和 transform 属性可以实现简单的文字滚动效果。这种方法适用于单行文字的水平滚动。

<template>
  <div class="scroll-container">
    <div class="scroll-text">{{ text }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段需要滚动的文字，可以自定义内容。'
    }
  }
}
</script>

<style>
.scroll-container {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-text {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

使用 Vue 过渡效果

Vue 的 <transition> 组件可以实现更复杂的滚动效果，比如垂直滚动的新闻列表。

<template>
  <div class="news-container">
    <transition-group name="scroll" tag="ul">
      <li v-for="(item, index) in news" :key="index">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: [
        '新闻1：Vue 3.0 正式发布',
        '新闻2：前端开发趋势分析',
        '新闻3：JavaScript 新特性',
        '新闻4：CSS 布局技巧'
      ],
      currentIndex: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.news.length
    }, 2000)
  }
}
</script>

<style>
.news-container {
  height: 30px;
  overflow: hidden;
}

.scroll-enter-active,
.scroll-leave-active {
  transition: all 0.5s ease;
}

.scroll-enter-from {
  transform: translateY(30px);
}

.scroll-leave-to {
  transform: translateY(-30px);
}
</style>

使用第三方库

对于更复杂的需求，可以使用专门用于滚动的 Vue 组件库，如 vue-seamless-scroll。

安装依赖：

npm install vue-seamless-scroll

使用示例：

vue实现文字滚动

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

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: [
        '内容1',
        '内容2',
        '内容3',
        '内容4',
        '内容5'
      ],
      option: {
        direction: 1,
        limitMoveNum: 3,
        step: 1,
        hoverStop: true,
        singleHeight: 30,
        waitTime: 1000
      }
    }
  }
}
</script>

<style>
.seamless-wrap {
  height: 90px;
  overflow: hidden;
}
</style>