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的基礎的同學應該都可以看懂