vue实现文字上下滚动

vue实现文字上下滚动

在Vue中实现文字上下滚动可以通过CSS动画或JavaScript动态控制样式来实现。以下是几种常见的方法：

使用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 {
  height: 50px;
  overflow: hidden;
  position: relative;
}

.scroll-text {
  position: absolute;
  animation: scroll 5s linear infinite;
}

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

使用JavaScript动态控制

通过动态修改元素的style属性来实现更灵活的控制。

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-text" :style="{ transform: `translateY(${offset}px)` }">
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是需要滚动的文字内容',
      offset: 0,
      scrollSpeed: 1,
      animationId: null
    }
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId)
  },
  methods: {
    startScroll() {
      const containerHeight = this.$refs.scrollContainer.clientHeight
      const textHeight = this.$refs.scrollContainer.querySelector('.scroll-text').clientHeight

      const scroll = () => {
        this.offset -= this.scrollSpeed
        if (this.offset < -textHeight) {
          this.offset = containerHeight
        }
        this.animationId = requestAnimationFrame(scroll)
      }

      this.animationId = requestAnimationFrame(scroll)
    }
  }
}
</script>

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

.scroll-text {
  position: absolute;
  white-space: nowrap;
}
</style>

使用第三方库

如果需要更复杂的效果，可以考虑使用第三方库如vue-marquee-text-component。

安装：

npm install vue-marquee-text-component

使用：

<template>
  <vue-marquee-text :repeat="5" :duration="3" :paused="false">
    {{ text }}
  </vue-marquee-text>
</template>

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

export default {
  components: {
    VueMarqueeText
  },
  data() {
    return {
      text: '这是需要滚动的文字内容'
    }
  }
}
</script>

多行文字滚动

对于多行文字的上下滚动，可以通过动态更新内容数组来实现。

<template>
  <div class="multi-scroll-container">
    <div 
      v-for="(item, index) in visibleItems" 
      :key="index" 
      class="scroll-item"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['第一行文字', '第二行文字', '第三行文字', '第四行文字'],
      visibleItems: [],
      currentIndex: 0,
      timer: null
    }
  },
  mounted() {
    this.updateVisibleItems()
    this.timer = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.items.length
      this.updateVisibleItems()
    }, 2000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    updateVisibleItems() {
      this.visibleItems = [
        this.items[this.currentIndex],
        this.items[(this.currentIndex + 1) % this.items.length]
      ]
    }
  }
}
</script>

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

.scroll-item {
  height: 30px;
  line-height: 30px;
  transition: transform 0.5s ease;
}
</style>

以上方法可以根据实际需求选择使用，CSS动画适合简单效果，JavaScript控制更灵活，第三方库可以快速实现复杂效果。