利用vue+定時器實現(xiàn)一個豎排列表每條滾動的效果，廢話不多說马澈，先上動效

基本效果.gif

如果想實現(xiàn)此效果茶敏，整體思路是這樣的

1.我們設(shè)置一個定時器，沒過一段時間使盒子中的ul整體上移一個li的高度掏愁，因此需要改變ul的margin-top樣式，我們先設(shè)置一個狀態(tài)為動畫開關(guān)和一個數(shù)據(jù)列表卵牍。

data:{
  animate: false,
  // 列表長度可根據(jù)需求自己隨意mock
  oldCustomersList: [
    {
        nickName: '測試',
        giftName: '100京豆'
    },
    {
        nickName: '測試',
        giftName: '100京豆'
    },
    {
        nickName: '測試',
        giftName: '100京豆'
    }
  ],
}

2.給我們需要加動畫的列表設(shè)置動態(tài)樣式果港，當(dāng)開關(guān)animate為true時改變margin-top的值。

<div class="marquee">
     <div class="marquee_box">
           <ul class="marquee_list" :class="{marquee_top:animate}">
             <!-- 用v-for渲染列表糊昙，key一定要加不然報錯辛掠，基本操作 -->
             <li v-for="(item, index) in collectEecordsList" :key="index">
               <p>{{item.nickName}}</p>
               <p>領(lǐng)取{{item.giftName}}</p>
             </li>
           </ul>
     </div>
</div>

5.我們?yōu)榻M件設(shè)置完成動畫需要的樣式

.marquee {
    width: 5.78rem;
    height: 3.48rem;
    overflow: hidden;
    background: url(https://img10.360buyimg.com/imgzone/jfs/t1/143710/5/12903/5792/5f9f9f60E740a7111/f41e707438dc4412.png) no-repeat center;
    background-size: 100%;
    padding-top: 0.56rem;
    margin: 0.6rem auto 0;
}

.marquee_box {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.marquee_list {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/* 這里為開關(guān)為true時添加的css樣式，來改變ul的释牺，margin-top */
.marquee_top {
    transition: all 0.5s ease-out;
    margin-top: -0.5rem;
}

.marquee_list li {
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.26rem;
    display: flex;
    border-bottom: 1px solid #ffd599;
    padding-left: 0.2rem;
    color: #af7427;
}

.marquee_list li p:nth-of-type(1) {
    width: 2.3rem;
    height: 100%;
}

4.接下來我們封裝一個方法showMarquee萝衩，在創(chuàng)建dom節(jié)點每兩秒調(diào)用一次該函數(shù)，由于列表過短會導(dǎo)致動效不好看没咙，所以在調(diào)用定時器之前可以對數(shù)組長度進(jìn)行判斷猩谊，自行修改。函數(shù)體為在調(diào)用之后先讓ul上移祭刚，過500毫秒之后執(zhí)行一次動畫停止牌捷，在停止期間操作數(shù)據(jù)列表，將列表第一項push給列表最后一項涡驮，再刪除第一項暗甥，保證列表可以循環(huán)滾動。

created() {
  setInterval(this.showMarquee, 2000);
},
methods: {
  showMarquee() {
    if ( this.collectEecordsList.length > 6 ) {
      this.animate = true;
      setTimeout(() => {
        this.collectEecordsList.push(this.collectEecordsList[0]);
        this.collectEecordsList.shift();
        this.animate = false;
      }, 500);
    }
  },
}捉捅，

順便附上隱藏昵稱函數(shù)

nickName(name) {
  if( name.length < 3 ) {
    return name[0] + '*';
  }
  if( name.length > 2 ) {
    return name[0] + new Array(name.length - 2).fill("*").join("*") + name[name.length - 1];
  }
 },

在獲取列表之后調(diào)用即可

let newCollectEecordsList = activityGiftRecords;
  newCollectEecordsList.forEach((value, index) => {
  value.nickName = self.nickName(value.nickName);
});
self.collectEecordsList = newCollectEecordsList; // 記錄領(lǐng)取記錄

如果需要直接復(fù)制粘貼整體思路即可撤防，樣式列表能根據(jù)需求而定，親測好用０艨凇寄月！