vue2封装向上滚动组件

1.代码

<template>
  <div class="marquee-wrap" :style="{'height': height + 'px'}">
    <ul class="marquee-list"
        :style="animateUpStyle"
        v-on:mouseover="myMouseover"
        v-on:mouseout="myMouseout"
    >
      <li v-for="(item, index) in listData" :key="index"
          :style="{'height': height + 'px', 'line-height': height + 'px'}">
        <slot :scrollItem="item"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TextScrolling",
  props: {
    scrollData: {
      type: Array,
    },
    height: {
      type: Number,
      default: 40
    },
    delay: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      animateUp: false,
      listData: [],
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(this.scrollAnimate, this.delay + 1000);
  },
  computed: {
    scrollDataProp() {
      return this.scrollData;
    },
    transitionDelay() {
      return this.delay / 1000
    },
    animateUpStyle() {
      if (this.animateUp) {
        return {
          transition: `all ${this.transitionDelay}s ease-in-out`,
          transform: `translateY(-${this.height}px)`
        }
      } else {
        return {}
      }
    }
  },
  watch: {
    scrollDataProp: {
      handler(newVal) {
        this.listData = newVal
      },
      immediate: true
    }
  },
  methods: {
    scrollAnimate() {
      this.animateUp = true
      setTimeout(() => {
        this.listData.push(this.listData[0])
        this.listData.shift()
        this.animateUp = false
      }, this.delay)
    },
    myMouseover() {
      clearInterval(this.timer)
    },
    myMouseout() {
      this.timer = setInterval(this.scrollAnimate, this.delay + 1000);
    }
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style scoped lang="less">
.marquee-wrap {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;

  .marquee-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;

    li {
      width: 100%;
      height: 100%;
      list-style: none;
    }
  }
}
</style>

2.使用

<text-scrolling :scrollData="scrollData" :height="40" :delay="1000">
        <template v-slot:default="scrollItem">
          <div class="scroll-box" style="color: red;border: 1px solid red;text-align: center">
            {{ scrollItem.scrollItem}} + 1
          </div>
        </template>
</text-scrolling>