vue 上下跑马灯脚本

在Vue.js中实现上下滚动的跑马灯效果，通常会结合JavaScript、CSS以及Vue组件的动态渲染。下面是一个简单的示例脚本：

<template>
  <div class="marquee">
    <transition-group :tag="tag" name="slide" v-on:before-enter="beforeEnter" v-on:enter="afterEnter" v-on:leave="afterLeave">
      <div v-for="(item, index) in items" :key="index" :style="{ top: slidePosition(index) + 'px' }">{{ item }}</div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tag: 'li', // 可选标签，默认为li，如需自定义元素，可以设置成其他HTML标签
      items: ['Item 1', 'Item 2', 'Item 3'], // 要显示的文字列表
      interval: 3000, // 滚动间隔时间（毫秒）
      currentIndex: 0,
      isReverse: false, // 是否逆序滚动，初始值为false（从上到下）
    };
  },
  computed: {
    slidePosition(index) {
      if (this.isReverse) {
        return index * -this.$el.clientHeight;
      } else {
        return (this.items.length - index - 1) * this.$el.clientHeight;
      }
    },
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    afterEnter(el) {
      el.style.opacity = 1;
    },
    afterLeave(tooltip, dir) {
      tooltip.style.opacity = 0;
    },
    startMarquee() {
      this.intervalId = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex >= this.items.length) {
          this.currentIndex = 0;
          this.isReverse = !this.isReverse; // 切换方向
        }
        this.$refs.marquee.children[this.currentIndex].scrollIntoView({ block: 'start', behavior: 'smooth' });
      }, this.interval);
    },
    stopMarquee() {
      clearInterval(this.intervalId);
    },
  },
  mounted() {
    this.startMarquee();
  },
  beforeDestroy() {
    this.stopMarquee();
  },
};
</script>

<style scoped>
.marquee {
  overflow-y: hidden;
  height: 60px; // 示例高度，根据实际需求调整
}
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease-in-out;
}
</style>

这个例子中，我们使用了Vue的`transition-group`指令配合计算属性`slidePosition`来控制每一项文字的滚动位置。`startMarquee`方法启动定时器，每间隔一定时间切换并滚动到下一个元素，`stopMarquee`用于停止动画。