vue实现标题滚动

Vue 实现标题滚动的方法

方法一：使用 CSS 动画

通过 CSS 的 @keyframes 和 transform 属性实现标题的横向滚动效果。适用于简单的文字滚动需求。

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

<script>
export default {
  data() {
    return {
      title: "这是一个需要滚动的标题，内容较长时自动滚动"
    };
  }
};
</script>

<style>
.scroll-container {
  width: 100%;
  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 的定时器动态更新位置

通过 JavaScript 定时器动态修改元素的 left 或 transform 属性，实现更灵活的滚动控制。

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-text" :style="{ transform: `translateX(${position}px)` }">
      {{ title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "动态控制的滚动标题",
      position: 0,
      direction: -1,
      speed: 2
    };
  },
  mounted() {
    this.startScrolling();
  },
  beforeDestroy() {
    this.stopScrolling();
  },
  methods: {
    startScrolling() {
      this.timer = setInterval(() => {
        const containerWidth = this.$refs.container.offsetWidth;
        const textWidth = this.$refs.container.querySelector('.scroll-text').scrollWidth;

        if (this.position <= -textWidth) {
          this.position = containerWidth;
        } else if (this.position > containerWidth) {
          this.position = -textWidth;
        }

        this.position += this.direction * this.speed;
      }, 16);
    },
    stopScrolling() {
      clearInterval(this.timer);
    }
  }
};
</script>

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

.scroll-text {
  display: inline-block;
  position: relative;
  left: 0;
}
</style>

方法三：使用第三方库（如 vue-marquee）

对于更复杂的需求，可以使用专门的跑马灯组件库，简化开发流程。

安装依赖：

npm install vue-marquee-text-component

使用示例：

<template>
  <marquee-text :duration="10" :repeat="5">
    {{ title }}
  </marquee-text>
</template>

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

export default {
  components: {
    MarqueeText
  },
  data() {
    return {
      title: "使用第三方库实现的滚动标题效果"
    };
  }
};
</script>

注意事项

• 对于长文本内容，确保容器宽度足够显示重要信息
• 移动端设备上可能需要调整滚动速度
• 组件销毁时记得清除定时器防止内存泄漏
• 考虑添加悬停暂停功能提升用户体验
• 无障碍访问方面，确保滚动内容可通过其他方式获取

性能优化建议

• 使用 transform 而非 left 属性实现动画，触发硬件加速
• 对于频繁更新的动画，使用 requestAnimationFrame 替代 setInterval
• 避免在滚动元素上使用复杂的阴影或滤镜效果
• 考虑使用 will-change CSS 属性优化渲染性能