vue滚动公告

要在Vue中实现滚动公告，可以使用CSS的动画，结合Vue的生命周期函数和定时器，来实现循环滚动的效果。以下是一个简单的示例代码：

<template>
  <div class="announcement">
    <div class="content" ref="content">{{ currentAnnouncement }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcements: ['Announcement 1', 'Announcement 2', 'Announcement 3'],
      currentIndex: 0,
      animationDuration: 3000 // 滚动间隔时间，单位为毫秒
    }
  },
  computed: {
    currentAnnouncement() {
      return this.announcements[this.currentIndex]
    }
  },
  mounted() {
    this.startAnimation()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    startAnimation() {
      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.announcements.length
        this.$refs.content.style.animation = `scroll ${this.animationDuration / 1000}s linear`
        setTimeout(() => {
          this.$refs.content.style.animation = ''
        }, this.animationDuration)
      }, this.animationDuration)
    }
  }
}
</script>

<style>
.announcement {
  overflow: hidden;
  height: 20px; /* 公告栏的高度 */
}

.content {
  display: inline-block;
  white-space: nowrap;
  animation-timing-function: linear;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% + 100vw)); /* 计算滚动距离 */
  }
}
</style>

这个示例中，我们将公告栏的高度设置为20px，并将文字内容放在一个inline-block元素中。然后，我们在CSS中定义了一个名为scroll的动画，让文字内容沿着X轴方向滚动。在Vue组件的mounted生命周期函数中，我们调用了startAnimation方法，该方法使用setInterval定时器来控制滚动的节奏。在每次滚动之前，我们设置了animation属性，来触发CSS动画。当动画结束后，我们使用setTimeout方法来清除animation属性，让内容回到原位。