vue 实现文字滚动

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的过渡系统实现更平滑的滚动效果：

<template>
  <div class="marquee">
    <transition-group name="scroll" tag="div" class="scroll-wrapper">
      <span v-for="(char, index) in text" :key="index" class="scroll-char">
        {{ char }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '滚动文字内容示例'
    }
  }
}
</script>

<style>
.marquee {
  width: 300px;
  overflow: hidden;
}

.scroll-wrapper {
  display: inline-block;
  white-space: nowrap;
}

.scroll-char {
  display: inline-block;
  animation: scroll 3s linear infinite;
}

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

使用第三方库vue-marquee

对于更复杂的需求，可以使用专门的vue-marquee组件：

安装依赖：

npm install vue-marquee-text-component

使用示例：

<template>
  <marquee-text :duration="5" :repeat="5">
    这是一段自动滚动的文字内容
  </marquee-text>
</template>

<script>
import MarqueeText from 'vue-marquee-text-component'

export default {
  components: {
    MarqueeText
  }
}
</script>

动态控制滚动

实现可暂停、可控制的文字滚动效果：

<template>
  <div>
    <div 
      ref="scroller" 
      class="scroll-box" 
      :style="{ animationPlayState: isPaused ? 'paused' : 'running' }"
    >
      {{ scrollingText }}
    </div>
    <button @click="toggleScroll">{{ isPaused ? '播放' : '暂停' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollingText: '动态控制的滚动文字内容...',
      isPaused: false
    }
  },
  methods: {
    toggleScroll() {
      this.isPaused = !this.isPaused
    }
  }
}
</script>

<style>
.scroll-box {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  animation: scroll 8s linear infinite;
}

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

垂直滚动实现

实现文字垂直方向滚动效果：

<template>
  <div class="vertical-scroll">
    <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>
.vertical-scroll {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  animation: verticalScroll 10s linear infinite;
}

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

这些方法提供了从简单到复杂的文字滚动实现方案，可以根据具体需求选择合适的方式。CSS动画方案性能较好但功能有限，Vue过渡方案更灵活，第三方库则提供了开箱即用的解决方案。