实现原理

实现原理也比较简单

  1. 对整个列表实现上移动画
  2. 将列表的第一个数据移动到最后一个

因为vue是基于数据驱动的，所以，对我们开发者来说，直接操控数组，删除第一个数组数据，然后追加到数组后面就好了。
template 部分

  1. <!-- 无缝滚动效果 -->
  2.   <div class="marquee-wrap">
  3.     <ul class="marquee-list" :class="{'animate-up': animateUp}">
  4.       <li v-for="(item, index) in listData" :key="index">{{item}}</li>
  5.     </ul>
  6.   </div>

script部分

  1. export default {
  2.   name: "marquee-up",
  3.   data() {
  4.     return {
  5.       animateUp: false,
  6.       listData: ['12***ve 成功邀请12人 已获奖金60元', 'l***e 成功邀请5人 已获奖金40元', 'l***e 成功邀请1人 已获奖金5元'],
  7.       timer: null
  8.     }
  9.   },
  10.   mounted() {
  11.     this.timer = setInterval(this.scrollAnimate, 1500);
  12.   },
  13.   methods: {
  14.     scrollAnimate() {
  15.       this.animateUp = true
  16.       setTimeout(() => {
  17.         this.listData.push(this.listData[0])
  18.         this.listData.shift()
  19.         this.animateUp = false
  20.       }, 500)
  21.     }
  22.   },
  23.   destroyed() {
  24.     clearInterval(this.timer)
  25.   }
  26. };

style 部分

  1. .marquee-wrap  {
  2.   width: 80%;
  3.   height: 40px;
  4.   border-radius: 20px;
  5.   background: rgba($color: #000000, $alpha: 0.6);
  6.   margin: 0 auto;
  7.   overflow: hidden;
  8.   .marquee-list {
  9.     li {
  10.       width: 100%;
  11.       height: 100%;
  12.       text-overflow: ellipsis;
  13.       overflow: hidden;
  14.       white-space: nowrap;
  15.       padding: 0 20px;
  16.       list-style: none;
  17.       line-height: 40px;
  18.       text-align: center;
  19.       color: #fff;
  20.       font-size: 18px;
  21.       font-weight: 400;
  22.     }
  23.   }
  24.   .animate-up {
  25.     transition: all 0.5s ease-in-out;
  26.     transform: translateY(-40px);
  27.   }
  28. }