vue实现文字自动滚动

实现文字自动滚动的Vue方法

使用CSS动画和Vue结合实现文字自动滚动效果，适用于公告栏、跑马灯等场景。

基础CSS动画实现

<template>
  <div class="scroll-container">
    <div class="scroll-text" :style="{ animationDuration: duration + 's' }">
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    duration: {
      type: Number,
      default: 10
    }
  }
}
</script>

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

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

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

使用requestAnimationFrame实现更精确控制

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

<script>
export default {
  props: {
    text: String,
    speed: {
      type: Number,
      default: 50
    }
  },
  mounted() {
    this.startScrolling()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId)
  },
  methods: {
    startScrolling() {
      const container = this.$refs.container
      const content = this.$refs.content

      let position = container.offsetWidth

      const animate = () => {
        position -= 1
        if (position < -content.offsetWidth) {
          position = container.offsetWidth
        }

        content.style.transform = `translateX(${position}px)`
        this.animationId = requestAnimationFrame(animate)
      }

      animate()
    }
  }
}
</script>

<style scoped>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.scroll-content {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
</style>

双向滚动实现（来回滚动）

<template>
  <div class="scroll-container">
    <div 
      class="scroll-text" 
      :style="{ 
        animationDuration: duration + 's',
        animationDirection: direction 
      }"
    >
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    duration: {
      type: Number,
      default: 5
    },
    direction: {
      type: String,
      default: 'alternate',
      validator: value => ['normal', 'reverse', 'alternate', 'alternate-reverse'].includes(value)
    }
  }
}
</script>

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

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

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

多行文本垂直滚动

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

<script>
export default {
  props: {
    items: Array,
    duration: {
      type: Number,
      default: 10
    }
  },
  mounted() {
    const content = this.$el.querySelector('.vertical-scroll-content')
    content.style.animationDuration = `${this.duration}s`
  }
}
</script>

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

.vertical-scroll-content {
  position: absolute;
  animation: vertical-scroll linear infinite;
}

@keyframes vertical-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.scroll-item {
  padding: 8px 0;
}
</style>

注意事项

1. 性能优化：对于大量文本或复杂动画，使用CSS动画通常比JavaScript性能更好
2. 响应式设计：确保容器宽度适应不同屏幕尺寸
3. 循环处理：长文本需要考虑无缝循环效果
4. 暂停控制：可通过添加暂停功能提升用户体验
5. 无障碍访问：确保滚动内容可被屏幕阅读器识别

以上方法可根据实际需求组合或调整参数，如滚动速度、方向、触发条件等。