当前位置：首页 > VUE

vue实现文字播放栏

2026-01-12 02:07:30VUE

实现文字播放栏的基本思路

在Vue中实现文字播放栏（如跑马灯效果或滚动公告）通常涉及动态更新文本位置或内容，结合CSS动画或JavaScript定时器控制滚动效果。以下是两种常见实现方式：

使用CSS动画实现横向滚动

通过CSS的@keyframes定义动画，结合transform: translateX实现横向滚动效果：

<template>
  <div class="marquee-container">
    <div class="marquee-content" :style="marqueeStyle">
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "这是一条需要横向滚动的文字内容，可以自定义长度和速度。",
      duration: 10 // 动画持续时间（秒）
    };
  },
  computed: {
    marqueeStyle() {
      return {
        animation: `marquee ${this.duration}s linear infinite`
      };
    }
  }
};
</script>

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

.marquee-content {
  display: inline-block;
  padding-left: 100%; /* 初始位置在右侧 */
}

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

使用定时器实现纵向轮播

通过setInterval定时更新显示的内容，实现垂直方向的文字轮播：

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

<script>
export default {
  data() {
    return {
      items: ["公告1：内容1", "公告2：内容2", "公告3：内容3"],
      currentIndex: 0,
      visibleCount: 1 // 同时显示的行数
    };
  },
  computed: {
    visibleItems() {
      return this.items.slice(
        this.currentIndex,
        this.currentIndex + this.visibleCount
      );
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
    }, 2000); // 每2秒切换一次
  }
};
</script>

<style>
.vertical-marquee {
  height: 1.2em; /* 单行高度 */
  overflow: hidden;
}
</style>

动态内容与暂停控制

增加鼠标悬停暂停功能，并支持动态更新内容：

vue实现文字播放栏

<template>
  <div 
    class="marquee" 
    @mouseenter="pause" 
    @mouseleave="resume"
  >
    <div :style="{ transform: `translateX(${offset}px)` }">
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "可动态更新的滚动文字",
      offset: 0,
      speed: -1, // 像素/帧
      animationId: null,
      isPaused: false
    };
  },
  methods: {
    updatePosition() {
      if (this.isPaused) return;
      this.offset += this.speed;
      if (this.offset < -this.$el.offsetWidth) {
        this.offset = this.$el.offsetWidth;
      }
      this.animationId = requestAnimationFrame(this.updatePosition);
    },
    pause() {
      this.isPaused = true;
    },
    resume() {
      this.isPaused = false;
      this.updatePosition();
    }
  },
  mounted() {
    this.updatePosition();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  }
};
</script>

<style>
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
</style>