vue2 跑马灯滚动字幕

你可以使用 Vue.js 的 transition 和动画效果来实现跑马灯滚动字幕的效果。下面是一个简单的示例代码：

<template>
  <div class="marquee">
    <transition-group name="slide">
      <div v-for="(item, index) in items" :key="index" class="item">
        {{ item }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        '这是第一条滚动字幕',
        '这是第二条滚动字幕',
        '这是第三条滚动字幕',
        '这是第四条滚动字幕',
        '这是第五条滚动字幕',
      ],
      currentIndex: 0,
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex++
      if (this.currentIndex === this.items.length) {
        this.currentIndex = 0
      }
    }, 2000)
  },
}
</script>

<style scoped>
.marquee {
  overflow: hidden;
  height: 50px;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}
</style>

上面的代码中，我们使用了 Vue.js 的 transition 和 transition-group 组件来实现滚动字幕的效果。我们通过设置 overflow: hidden 和 height 来限制容器高度，同时通过 transform 和 transition 来实现滚动动画效果。我们通过 setInterval 来定时更新当前选中的滚动字幕，从而实现滚动效果。