VUE-文字跑马灯
- 背景：
项目需要4K大屏做文字做文字跑马灯(3840*2160),四个部门，每个部门轮播，一个部门跑完下一个部门接上。
- 技术背景:
vue-cli+element
- 思路
三种方式来做，1. 相对定位绝对定位TOP值自加； 2. scrollTop自加； 3. 动画animation, translateY;
分别说下这三个方法的优缺点（本来不想加代码的,最后想想加上去吧）
- position 定位的方式用top++的方法，方法就是很消耗浏览器的内存，在DOM的渲染方面。
- scrollTop 刚刚开始没用的是因为this.$refs.DOM.scrollTop++没有效果，必须在中间增加一个中间变量。
- animation，不好的地方在于是CSS控制，当然你要使用还是可以的，.transitionDuration和setTimeout
- 使用
最后斟酌以后使用了scrollTop,对内存和js的使用都比较友好，最后上下代码
getinit(){
this.$refs.DOM.scrollTop = 0;
this.scrollMove(this.$refs.DOM)
}
scrollMove(ref) {
this.$nextTick(() => {
ref.scrollTop++;
this.scrollUp_inter = setInterval(() => {
this.scrllUp(ref)
}, this.speed)
})
}
scrllUp(ref) {
this.top++;
ref.scrollTop = this.top
if(ref.scrollTop >= ref.scrollHeight - ref.clientHeight) {
window.clearInterval(this.scrollUp_inter)
setTimeout(() => {
this.top = 0;
this.getinit()
}3*1000)
}
}
复制代码代码应该写的很清晰，有一定vue和js的基础的同学应该都可以看懂