VUE-文字跑馬燈

pro-xiaoy發表於2018-11-19
Vue

VUE-文字跑馬燈

  1. 背景：
專案需要4K大屏做文字做文字跑馬燈(3840*2160),四個部門，每個部門輪播，一個部門跑完下一個部門接上。
  1. 技術背景:
vue-cli+element
  1. 思路
三種方式來做，1. 相對定位絕對定位TOP值自加； 2. scrollTop自加； 3. 動畫animation, translateY;
分別說下這三個方法的優缺點（本來不想加程式碼的,最後想想加上去吧）
  1. position 定位的方式用top++的方法，方法就是很消耗瀏覽器的記憶體，在DOM的渲染方面。
  2. scrollTop 剛剛開始沒用的是因為this.$refs.DOM.scrollTop++沒有效果，必須在中間增加一箇中間變數。
  3. animation，不好的地方在於是CSS控制，當然你要使用還是可以的，.transitionDuration和setTimeout
  1. 使用
最後斟酌以後使用了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的基礎的同學應該都可以看懂

相關文章