vue.js 动态文字向上滚动广播中奖信息代码

🌳🌳🌳个人博客：Harvey的个人博客 🌲🌲🌲

效果如图

 

<template>


  <div class="roll-msg">
    <div class="popup">
      <div class="box">
        <ul class="lb" :class="{marquee_top:animate}">
          <li v-for="(item, index) in list" >{{item}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props:['list'],
  data() {
    return {
      animate: false,
     list: ["恭喜***asdasdas获得10积分", "恭喜***获得20积分", "恭喜***获得40积分"]
    };
  },
  methods: {
 
  },
  mounted() {
 

    let that = this;
    const timer = setInterval(() => {
      this.animate = true;

      setTimeout(() => {
        that.list.push(this.list[0]);
        that.list.shift();
        that.animate = false;
        console.log(Math.random());
      }, 500);
    }, 3000);
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  }
};
</script>

<style lang="less" scoped>
div,
ul,
li,
span,
img {
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box;
}

.marquee {
  width: 100%;
  height: 50px;
  align-items: center;
  color: #3a3a3a;
  background-color: #b3effe;
  display: flex;
  box-sizing: border-box;
}

.marquee_title {
  padding: 0 20px;
  height: 30px;
  font-size: 14px;
  border-right: 1px solid #d8d8d8;
  align-items: center;
}

.marquee_box {
  display: block;
  position: relative;
  width: 60%;
  height: 30px;
  overflow: hidden;
}

.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.marquee_top {
  transition: all 0.5s;
  margin-top: -30px;
}

.marquee_list li {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding-left: 20px;
}

.marquee_list li span {
  padding: 0 2px;
}

.red {
  color: #ff0101;
}

.roll-msg {
  position: absolute;
  top: 0.4rem;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;

  .popup {
    border-radius: 20px;
    width: 45%;
    height: 0.6rem;
    min-width: 150px;
    align-items: center;
    color: #fff;
    background-color: rgb(10, 10, 10, 0.1);
    opacity: 0.7;
    display: flex;
    box-sizing: border-box;

    .box {
      display: block;
      position: relative;
      padding: 0 .3rem;
      width: 100%;
      height: 30px;
      overflow: hidden;

      .lb {
          width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;

        li{
            display: flex;
            justify-content: center;
            margin-top: 4px;
        }
      }
    }
  }
}
</style>