VUE-文字跑马灯

VUE-文字跑马灯

1. 背景：

项目需要4K大屏做文字做文字跑马灯(3840*2160),四个部门，每个部门轮播，一个部门跑完下一个部门接上。

2. 技术背景:

vue-cli+element

3. 思路

三种方式来做，1. 相对定位绝对定位TOP值自加； 2. scrollTop自加； 3. 动画animation, translateY;

分别说下这三个方法的优缺点（本来不想加代码的,最后想想加上去吧）

1. position 定位的方式用top++的方法，方法就是很消耗浏览器的内存，在DOM的渲染方面。
2. scrollTop 刚刚开始没用的是因为this.$refs.DOM.scrollTop++没有效果，必须在中间增加一个中间变量。
3. animation，不好的地方在于是CSS控制，当然你要使用还是可以的，.transitionDuration和setTimeout

4. 使用

最后斟酌以后使用了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的基础的同学应该都可以看懂