最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。效果如下：

废话不多说，下面直接贴上代码。

html代码如下：

    
   
        
     
     
      
       
       
{
   {item.phone}}抽中{
   {item.prizeName}}
       
       
{
   {noticeList[0].phone}}抽中{
   {noticeList[0].prizeName}}
       
       
{
   {noticeList[0].phone}}抽中{
   {noticeList[0].prizeName}}
       
       
获奖公告
     
      
   
     
 
    

less代码如下：

.notice{     display: flex;     justify-content: center;     padding-bottom: .26rem;     img{       width: .3rem;       height: .24rem;     }     .wrap{       position: relative;       height:.3rem;       overflow: hidden;       margin-left: .15rem;       font-size: .24rem;       color: #391b03;     }     ul{       position: relative;       top: -.3rem;       li{         height: .3rem;         line-height: .3rem;       }     }     .transitionTop{       transition: top 200ms ease-in-out;     } }

js代码如下：

// data下 noticeTop: 0, // 公告top值 isActive:true, // 是否显示transitionTop动画 timer: null, // 公告滚动定时器 noticeList: [   {     phone:'135****1234',     prizeName:'50元还款券'   },   {     phone:'135****1234',     prizeName:'60元还款券'   },   {     phone:'135****1234',     prizeName:'70元还款券'   } ], // 公告列表  // computed下 noticeLen(){ // 公告列表长度     return this.noticeList.length; } //methods下 noticeScroll(){// 公告滚动，定时改变公告的top值     if(this.noticeLen > 0){       let index =1,           len = this.noticeLen === 1 ? 3 : (this.noticeLen + 1);       this.timer = setInterval(() => {         this.isActive = true;         this.noticeTop = -3 * index / 10;         index ++;         if(index === len){// 滚动到底部时返回           let delayTime = setTimeout(() => {             this.isActive = false;             this.noticeTop = 0;             index = 1;             clearTimeout(delayTime);           }, 1000);         }       }, 3000);     } } //调用 this.noticeScroll();

需要说明的是：1.项目是基于vue的语法2.滚动到底部返回时加了个延迟，是为了能滚动到最后一个，然后从最后一个返回到第一个。