公司的管理系统中有“文字间歇无缝向上滚动”的需求，现在这种需求基本在项目开发中已经消失了，没什么新颖的，但架不住公司高层喜欢这种玩意儿，所以，作为开发人员，即使你有一百个不乐意，谁让是人家给你发工资呢！！！
其实，这种用在vue项目中的需求跟原生js的实现方法基本一致，且实现的方法有多种，今天就单拎出来一种实现方法吧：
<div class="scroll-up" ref="scroll">
<ul>
<li v-for="item in scrollData" :key="item.id"><router-link to="">{{item.title}}</router-link></li>
</ul>
</div>
export default {
data() {
return {
scrollData: [
{ id: 1, title: '架不住公司高层喜欢这种玩意儿' },
{ id: 2, title: '用在vue项目中的需求跟原生js的实现方法' },
{ id: 3, title: '文字间歇无缝向上滚动' },
{ id: 4, title: '即使你有一百个不乐意，谁让是人家给你发工资呢' },
{ id: 5, title: '今天就单拎出来一种实现方法' },
],
scrollArea: '',
speed: 20,
timer: null,
delay: 3000,
liHeight: '',
};
},
mounted() {
this.$nextTick(() => {
this.scrollArea = this.$refs.scroll;
let li = this.scrollArea.getElementsByTagName("li");
this.liHeight = li[0].offsetHeight;
this.scrollArea.scrollTop = 0;
this.scrollArea.innerHTML += this.scrollArea.innerHTML;
this. scrollData.length > 1 && setTimeout(this.startScroll, this.delay);
})
},
methods: {
startScroll(){
this.timer = setInterval(this.scrollUp, this.speed);
this.scrollArea.scrollTop++;
},
scrollUp(){
if(this.scrollArea.scrollTop % this.liHeight == 0){
clearInterval(this.timer);
setTimeout(this.startScroll, this.delay);
}else{
this.scrollArea.scrollTop++;
if(this.scrollArea.scrollTop >= this.scrollArea.scrollHeight / 2){
this.scrollArea.scrollTop = 0;
}
}
},
}
}
<style scoped>
.scroll-up{height:50px;line-height:50px;overflow:hidden;}
</style>
就酱！