当前位置：首页 > VUE

vue 实现文字滚动

2026-01-14 02:22:41VUE

实现文字滚动的几种方法

在Vue中实现文字滚动效果可以通过多种方式实现，以下是几种常见的实现方法：

使用CSS动画

通过CSS的animation和@keyframes可以实现简单的文字滚动效果。

<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="scroll-container">
    <transition name="slide" mode="out-in">
      <div :key="currentText">{{ currentText }}</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: ['第一段文字', '第二段文字', '第三段文字'],
      currentIndex: 0
    }
  },
  computed: {
    currentText() {
      return this.texts[this.currentIndex]
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.texts.length
    }, 2000)
  }
}
</script>

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

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

.slide-enter {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}
</style>

使用第三方库

可以使用专门用于滚动的第三方库，如vue-seamless-scroll。

安装库：

npm install vue-seamless-scroll

使用示例：

<template>
  <vue-seamless-scroll :data="list" class="seamless-warp">
    <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']
    }
  }
}
</script>

<style>
.seamless-warp {
  height: 200px;
  overflow: hidden;
}
</style>

使用JavaScript实现

通过JavaScript动态修改样式实现滚动效果。

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

<script>
export default {
  data() {
    return {
      text: '这是一段需要滚动的文字，可以自定义内容。'
    }
  },
  mounted() {
    const container = this.$refs.scrollContainer
    const text = this.$refs.scrollText
    const containerWidth = container.offsetWidth
    const textWidth = text.offsetWidth

    let position = containerWidth
    const speed = 1

    setInterval(() => {
      position -= speed
      if (position < -textWidth) {
        position = containerWidth
      }
      text.style.transform = `translateX(${position}px)`
    }, 16)
  }
}
</script>

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

.scroll-text {
  display: inline-block;
}
</style>