vue 實現無限向上滾動

<template>
  <div id="box">
    <div
      id="con1"
      ref="con1"
      :class="{anim:animate==true}"
      @mouseenter="mEnter"
      @mouseleave="mLeave"
    >
      <p v-for="(item,index) in items" :key="index">中獎人的名字是--{{item.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animate: false,
      items: [
        //消息列表對應的數組
        { name: "Kobe Bean Bryant" },
        { name: "Kyrie Irving" },
        { name: "Dwyane Wade" },
        { name: "Pau Gasol" },
        { name: "Dwight Howard" },
        { name: "DeMarcus Cousins" },
        { name: "Kevin Durant" }
      ]
    };
  },

  mounted() {
    this.timer1 = setInterval(this.scroll, 1000);
  },

  methods: {
    scroll() {
      let con1 = this.$refs.con1;
      con1.style.marginTop = "-30px";
      this.animate = !this.animate;
      var that = this; // 在異步函數中會出現this的偏移問題，此處一定要先保存好this的指向
      setTimeout(function() {
        that.items.push(that.items[0]);
        that.items.shift();
        con1.style.marginTop = "0px";
        that.animate = !that.animate; // 這個地方如果不把animate 取反會出現消息回滾的現象，此時把ul 元素的過渡屬性取消掉就可以完美實現無縫滾動的效果了
      }, 500);
    },
    mEnter() {
      clearInterval(this.timer1);
    },
    mLeave() {
      this.timer1 = setInterval(this.scroll, 1000);
    }
  }
};
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
}
#box {
  width: 300px;
  height: 175px;
  line-height: 30px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid #ffffff;
  transition: all 0.5s;
}
.anim {
  transition: all 0.5s;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}
</style>

　　當我們鼠標在上邊時停止，離開繼續滾動