angular实现消息滚动原创

  
    
最新消息：
    

      

        

          {{item.text}}
        
        
{{item.time | date:yyyy-MM-dd HH:mm:ss}}
      
    
  


// 消息滚动
.news-card{
  width:100%;
  height:60px;
  position:relative;
  overflow:hidden;
  margin:0;
}
.msg-text{
  margin:0;
  height:18px;
  line-height: 1;
  color:#F32C3B!important; 
  width:96px;
  height:100%;
  line-height:58px;
  position:absolute;
  top:0;
  left:24px;
}
.scroll-box{
  width:calc(~100% - 24px - 120px);
  height:100%;
  position:absolute;
  top:0;
  right:24px;
}
.scroll-box div{
  height: 58px;
  line-height: 58px;
}
.scroll-top {
  transition: all 0.5s;
  margin-top: -58px;
}

flag = false;
newsList = [
  {text: 您有一条新消息1, time: new Date()},
  {text: 您有一条新消息2, time: new Date()},
  {text: 您有一条新消息3, time: new Date()},
  {text: 您有一条新消息4, time: new Date()},
  {text: 您有一条新消息5, time: new Date()},
];
timer = null;

ngOnInit() {
  clearInterval(this.timer);
  this.timer = setInterval(() => {
    this.showMarquee();
  }, 3000);
}

showMarquee() {
  this.flag = true;
  setTimeout (() => {
    this.newsList.push(this.newsList[0]);
    this.newsList.shift();
    this.flag = false;
  }, 500);
}

ngOnDestroy() {
  this.timer = null;
}

参考博客文章： angular实现新闻公告滚动和图片旋转

谢谢！