当前位置：首页 > VUE

vue实现横滚

2026-01-13 04:21:09VUE

实现横滚效果的基本方法

在Vue中实现横滚效果可以通过CSS动画或JavaScript动态控制样式。以下是两种常见方法：

使用CSS动画实现横滚

通过CSS的@keyframes定义动画，结合Vue绑定类名或内联样式触发动画：

<template>
  <div class="scroll-container">
    <div class="scroll-content" :class="{ 'animate-scroll': isScrolling }">
      <!-- 横滚内容 -->
    </div>
  </div>
</template>

<style>
.scroll-container {
  overflow: hidden;
  width: 100%;
}

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

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

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

使用JavaScript动态控制

通过Vue的响应式数据和requestAnimationFrame实现更灵活的横滚控制：

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" :style="{ transform: `translateX(${offset}px)` }">
      <!-- 横滚内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offset: 0,
      speed: 2,
      animationId: null
    }
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId)
  },
  methods: {
    startScroll() {
      const animate = () => {
        this.offset -= this.speed
        if (Math.abs(this.offset) >= this.$refs.container.scrollWidth) {
          this.offset = 0
        }
        this.animationId = requestAnimationFrame(animate)
      }
      animate()
    }
  }
}
</script>

无缝循环横滚的优化

对于需要无缝循环的内容，需复制一份内容并调整逻辑：

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ transform: `translateX(${offset}px)` }">
      <!-- 原始内容 -->
      <div v-html="content"></div>
      <!-- 复制内容 -->
      <div v-html="content"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '<span>横滚文本内容</span>',
      offset: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.offset -= 1
      if (Math.abs(this.offset) >= this.$el.querySelector('.scroll-content').scrollWidth / 2) {
        this.offset = 0
      }
    }, 16)
  }
}
</script>