vue如何实现文字公告自动横向循环滚动 给我一个实现demo

很高兴为您解答这个问题！以下是一个简单的 Vue 实现文字公告自动横向循环滚动的 demo：

<template>
  <div class="notice">
    <div class="notice-content" ref="noticeContent">
      <div class="notice-item" v-for="(item, index) in noticeList" :key="index">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noticeList: ["这是第一条公告", "这是第二条公告", "这是第三条公告"],
      timer: null,
      speed: 50,
      step: 1,
      offset: 0,
      itemWidth: 0,
      containerWidth: 0,
    };
  },
  mounted() {
    this.itemWidth = this.$refs.noticeContent.querySelector(".notice-item").offsetWidth;
    this.containerWidth = this.$refs.noticeContent.offsetWidth;
    this.startScroll();
  },
  methods: {
    startScroll() {
      this.timer = setInterval(() => {
        this.offset += this.step;
        if (this.offset >= this.itemWidth) {
          this.offset = 0;
          this.noticeList.push(this.noticeList.shift());
        }
        this.$refs.noticeContent.style.transform = `translateX(-${this.offset}px)`;
      }, this.speed);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

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

.notice-content {
  display: inline-block;
}

.notice-item {
  display: inline-block;
  margin-right: 20px;
}
</style>

在这个 demo 中，我们首先在模板中定义了一个容器，用来包裹公告内容。然后，我们在 `mounted` 钩子中获取了公告项的宽度和容器的宽度，以便后面计算滚动距离。接着，我们定义了一个 `startScroll` 方法，用来启动滚动。在这个方法中，我们使用了 `setInterval` 定时器来不断更新公告的位置，直到公告滚动到末尾时，将第一条公告移到最后，然后重新开始滚动。最后，我们在 `beforeDestroy` 钩子中清除了定时器，以防止内存泄漏。

希望这个 demo 能够帮助您实现文字公告自动横向循环滚动！