vue中滚动列表

<template>
  <div id="FontScroll" class="myscroll" @mouseenter="stopMarquee" @mouseleave="startMarquee">
    <ul ref="marqueeUl">
      <li v-for="item in list" :key="index">
        <div class="fontInner clearfix">
                     <span>
                         <b>{{index}}</b>
                      </span>
               <span>{{item }}</span>
               <span>{{item }}</span>
         </div>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Marquee',
  props: {
    speed: {
      type: Number,
      default: 60
    },
    rowHeight: {
      type: Number,
      default: 24
    },
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    startMarquee() {
      this.marqueeTimer = setInterval(() => {
        const ul = this.$refs.marqueeUl;
        const el = document.getElementById('FontScroll')
        if (ul.offsetHeight <= el.offsetHeight) {
          clearInterval(this.marqueeTimer);
        } else {
          this.marquee(ul, this.rowHeight);
        }
      }, this.speed);
    },
    stopMarquee() {
      clearInterval(this.marqueeTimer);
    },
    marquee(ul, step) {
      ul.style.marginTop = parseInt(getComputedStyle(ul).marginTop) - 1 + 'px';
      const s = Math.abs(parseInt(getComputedStyle(ul).marginTop));
      if (s >= step) {
        ul.appendChild(ul.querySelector('li:first-child'));
        ul.style.marginTop = 0;
      }
    }
  },
  mounted() {
    this.startMarquee();
  }
};
</script>
<style lang="less>
#FontScroll{
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin-top: 10px;
}
#FontScroll ul li{
    height: 30px;
    width: 100%;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
    font-size: 16px;
}
#FontScroll ul li:nth-child(1){
    /*background-color: #072951;*/
    box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
    10px 0px 15px #034c6a inset;

}
#FontScroll ul li:hover{
    box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
    10px 0px 15px #034c6a inset;
    cursor: pointer;
}

.fontInner span{
    display:inline-block;
    width:31%;
    color: #ffffff;
    /*background: red;*/

}
.fontInner span b{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    color: #ffffff;
    line-height: 20px;
}
</style>


//  组件引用
<template>
  <div>
    <marquee :speed="60" :rowHeight="24" :list="items"></marquee>
  </div>
</template>

<script>
import Marquee from '@/components/Marquee.vue';

export default {
  name: 'App',
  components: {
    Marquee
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>