vue列表自动滚动实现2

1、用C3实现

.box{  
  animation: scroll 20s infinite linear;
}
//增加鼠标移入停止效果
.box:hover{    
 animation-play-state:paused;  
}
@keyframes scroll{  
 0%{    
  transform: translateY(0); 
 }  
 100%{    
  transform: translateY(-50%);  
 }
}

2、JS实现

<div ref='boxHeight'>
<ul ref="scrollHeight" :style="{'top':tableTop+'px'}" @mouseenter="monseenter" @mouseleave="mouseleave" >...
</ul>
</div>

js部分：
// 病区动态计算    
tableActionFun() {      
  this.$nextTick = (() => {        
    const boxHeight = this.$refs.boxHeight.offsetHeight;// 获取盒子高度        
    const scrollHeight = this.$refs.scrollHeight.offsetHeight;//获取滚动区域内容高度        
    if (scrollHeight > boxHeight ) {          
      this.showScroll = true;          
      this.scrollData= this.scrollData.concat(this.scrollData);          
      this.tableTimerFun();        
    } else this.showScroll = false;      
  });    
},
 // 滚动的方法    
tableTimerFun() {      
  let count = 0;      
  this.tableTimer = setInterval(() => {        
    if (count < (this.$refs.scrollHeight .offsetHeight / 2)) {
       this.tableTop -= 1;          
       count++;        
    } else {          
      count = 0;          
      this.tableTop = 12;        
    }      
  }, 100);// 向上滚动1px所需的时间，越小越快    
}, 
// 鼠标移入悬停    
monseenter() {      
  if (this.tableTimer && this.showScroll) {        
    clearInterval(this.tableTimer);        
    this.tableTimer = null;      
  }    
},    
// 鼠标移出    
mouseleave() {     
  if (this.showScroll) this.tableTimerFun();    
},

方法2参考自blog.csdn.net/zxczero/art…

以上两个方法亲测有效！