vue 文字無縫滾動_vue 上實作無縫滾動播放文字系統公告

首先實作效果，當時的需求做的系統公告框設定一個寬度，超寬滾動播放，沒超寬則靜态展示，

有了需求，想了下實作原理，最開始打算js更改字型内容的方式，但是想了下感覺會有點麻煩，想起之前做了表格的左側邊固定，是利用了将表格分層兩部分，滾動的時候通過translate來移動了表格的位置，實作的半邊滾動，半邊移動，這種辦法可以用在我們這裡，這樣就實作了代碼的橫向滾動，這下就剩下無縫連結。

既然是用translate實作的滾動，我們可以在滾動前做好排版，将一個内容一樣的div塊緊貼在内容塊後面一起滾動，并且在目前條滾動完後，恢複初始位置，且此位置必須與剛開始滾動前的位置像重合，看起效果就是滾動的無縫連結，

廢話不多說下面直接貼代碼，我盡量在代碼注釋裡寫進各部分功能，這裡就不詳細介紹

顯示html部分

系統公告： 

{{text}}

{{text}}

#mar {

.announcement{

color:#ff4786;

}

height:40px;

line-height: 40px;

.PackagingShell {

width: 89%;

overflow: hidden;

font-size: 12px;

color: #111;

}

#viewBox {

white-space: nowrap;

}

#marquee {

white-space: nowrap;

}

#hide {

position: absolute;

z-index: -999;

top: -9999px;

white-space: nowrap;

}

.header {

float: left;

font-size:12px;

>img{

vertical-align: middle;

}

}

}

接下來是比較關鍵的js 部分，主要的位移對比代碼都在這裡

name:'Marquee',

data () {return{

text:'', //内容

textWidth: 0, //字元長度

isScroll: false //是否滾動

}

},

methods: {

init () {//初始化函數

getHomepageMessage().then((response) => { //接口請求

if (response.body.code !== '0000') {return}//this.text = response.body.data[0].messageContent

//滾動内容指派

this.text = '滾動無縫連結測試滾動無縫連結測試滾動無縫連結測試滾動無縫連結測試滾動無縫連結測試滾動無縫連結測試滾動無縫連結測試滾動無縫連結測試滾動無縫連結測試滾動無縫連結測試'})

.catch((response) =>{

console.log(response,'error')

})

},

move () {//首先擷取整個内容的寬度,(展示内容會超出隐藏,無法通過擷取盒子寬度取到實際的内容寬度)

//是以專門造了一個 div 塊來放内容,隐藏起來 (無法用根據字型内容來計算寬度的方法,存在誤差,當内容較多

//的時候誤差會相對較大)

let width = document.getElementById('hide').getBoundingClientRect().width//擷取展示塊盒模型寬度

let BoxWidth = document.getElementById('PackagingShell').offsetWidth//擷取内容展示寬

let viewBox = document.getElementById('viewBox')//判斷内容是否超長

if ((BoxWidth - width) < 0) {//内容超長,則擷取抄本元素

let transcript = document.getElementById('transcript')//抄本元素内容填充

transcript.innerText = this.text//設定抄本和主題之間的間距

transcript.style.marginLeft = '200px'}else{//沒有超長則return,不做任何操作

return}//設定初始位移距離

let distance = 0

//移動函數,通過定時器實作

setInterval(function() {//位移内用記錄是是遞減,此處的 1 控制移動變量 s

distance = distance - 1

//判斷是否整個内容移動完

if (-distance >=width) {//若移動完,則重新設定位移值,此處指派200是正好把 上面設定的塊間距 200px 也加入移動範圍,實作移動完無縫跳轉

distance = 200}//實時設定位移距離

viewBox.style.transform = 'translateX(' + distance + 'px)'},27) //移動時間間隔t s和t 共同決定移動速度

}

},

mounted () {//初始化

this.init()

},//更新的時候運動

updated: function() {this.move()

}

}

因為項目把所有api獨立出去了，是以若果你直接複制是無法使用，

但是隻需要在init 初始化函數裡将其它内容删除，隻留 給this.text 指派的内容就行！

js部分的描述我全寫在了注釋裡，這裡就不單獨講一遍了

---------------------

作者：高數定積分

原文：https://blog.csdn.net/qq_43192782/article/details/85322971

版權聲明：本文為部落客原創文章，轉載請附上博文連結！