博客

<template>
  <!-- vue 实现无限向上滚动 -->
  <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: "程序员-陈*" },
        { name: "程序员-李*" },
        { name: "程序员-王*" },
        { name: "程序员-赵*" },
        { name: "程序员-高*" },
        { name: "程序员-要*" },
        { name: "程序员-刘*" },
      ],
    };
  },
  mounted() {
    this.timer1 = setInterval(this.scroll, 1000); //setInterval定时器，当页面加载完执行定时器
  },

  methods: {
    scroll() {
      //建一个方法
      let con1 = this.$refs.con1;
      con1.style.marginTop = "-30px"; //设置style样式 向上移动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"; //设置style样式 向上移动30px 再回到原位
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500);
    },
    mEnter() {
      clearInterval(this.timer1); //鼠标移入清除定时器
    },
    mLeave() {
      this.timer1 = setInterval(this.scroll, 1000); //鼠标离开启动定时器，执行 scroll
    },
  },
};
</script>
 
 
<style scoped>
* {
  margin: 0;
  padding: 0;
}
#box {
  margin: 0 auto;
  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>