vue 多行横向滚动 类似于弹幕效果

Vue 中实现类似弹幕效果的多行横向滚动，通常可以利用 Vue 的组件化思想，结合 CSS 和 JavaScript 来完成。这需要以下几个步骤：

1. **创建一个自定义组件**：首先，你可以创建一个名为 `ScrollingText` 或者 `Barrage` 的 Vue 组件，这个组件会包含一个滚动容器和动态生成的文字列表。

<template>
  <div class="scrolling-barrage">
    <ul ref="scrollContainer" :style="{ transform: 'translateX(' + scrollPosition + 'px)' }">
      <li v-for="(message, index) in messages" :key="index">
        {{ message }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [], // 弹幕文字数组
      scrollSpeed: 5, // 滚动速度 (像素/秒)
    };
  },
  methods: {
    addMessage(message) {
      this.messages.push(message);
      // 更新滚动位置
      this.updateScroll();
    },
    updateScroll() {
      // 动态计算并设置滚动容器的样式
      const maxScroll = this.$refs.scrollContainer.clientWidth - this.$el.offsetWidth;
      if (this.scrollPosition < maxScroll) {
        this.scrollPosition += this.scrollSpeed;
      }
    },
  },
};
</script>

2. **CSS 部分**：编写一些基本的 CSS 规则，包括滚动容器、文字样式以及动画效果（如淡入淡出）。

.scrolling-barrage {
  overflow-x: auto;
  white-space: nowrap;
}

.scrolling-barrage ul {
  display: flex;
  animation: scrolling infinite linear 0.5s;
}

@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

3. **使用组件**：在需要展示弹幕的地方引入这个组件，并通过调用 `addMessage` 方法添加新的弹幕消息。

例如，在父组件模板中：

<ScrollingText @addMessage="handleAddMessage"></ScrollingText>

然后在父组件的 `methods` 中：

methods: {
  handleAddMessage(message) {
    this.$refs.barrage.addMessage(message);
  },
},