vue 用idiv写一个滚动提示条

你可以使用 Vue 和 CSS 来创建一个滚动提示条。首先，在你的 Vue 文件中，你可以使用 `v-for` 指令来循环渲染一组消息，并且使用 `ref` 来获取滚动容器的引用。然后，你可以使用 CSS 来设置滚动效果。

这是一个示例代码：

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="message" v-for="message in messages" :key="message.id">
      {{ message.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { id: 1, text: '消息1' },
        { id: 2, text: '消息2' },
        { id: 3, text: '消息3' },
        // 其他消息...
      ]
    };
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      setInterval(() => {
        const container = this.$refs.scrollContainer;
        container.scrollTop += 1; // 每次滚动1像素
      }, 50); // 滚动速度，单位为毫秒
    }
  }
};
</script>

<style>
.scroll-container {
  height: 200px; /* 设置滚动容器的高度 */
  overflow-y: scroll; /* 显示垂直滚动条 */
}

.message {
  margin-bottom: 10px;
}
</style>

在这个示例中，`messages` 数组包含了要显示的消息列表。通过使用 `v-for` 指令，我们将每个消息渲染为一个 `div` 元素。通过使用 `ref` 属性，我们可以在 `mounted` 钩子函数中获取滚动容器的引用，并在 `startScroll` 方法中使用 `setInterval` 来实现滚动效果。在这个示例中，每隔50毫秒，滚动容器的 `scrollTop` 属性增加1像素，从而实现滚动的效果。

你可以根据自己的需求修改代码，例如调整滚动速度或消息列表的内容。希望这可以帮助到你！