如何使用vue實現(xiàn)文字橫向無縫走馬燈組件效果

這篇文章將為大家詳細(xì)講解有關(guān)如何使用vue實現(xiàn)文字橫向無縫走馬燈組件效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

marquee標(biāo)簽已經(jīng)廢棄了，只能手動實現(xiàn)文字走馬燈樣式

基于vue組件開發(fā)

<template>
 <div class="wrap"> // 外框，固定寬度
  <div id="box"> // 內(nèi)部滾動框
   <div id="marquee">{{text}}</div> //展示的文字
   <div id="copy"></div> // 文字副本，為了實現(xiàn)無縫滾動
  </div>
  <div id="node">{{text}}</div> //為了獲取text實際寬度
 </div>
</template>
<script>
export default {
 name: 'Marquee',
 props: ['lists'], // 父組件傳入數(shù)據(jù)， 數(shù)組形式 [ "連雨不知春去"，"一晴方覺夏深"]
 data () {
  return {
   text: '' // 數(shù)組文字轉(zhuǎn)化后的字符串
  }
 },
 methods: {
  move () {
// 獲取文字text 的計算后寬度 （由于overflow的存在，直接獲取不到，需要獨(dú)立的node計算）
   let width = document.getElementById('node').getBoundingClientRect().width 
   let box = document.getElementById('box')
   let copy = document.getElementById('copy')
   copy.innerText = this.text // 文字副本填充
   let distance = 0 // 位移距離
//設(shè)置位移
   setInterval(function () { 
    distance = distance - 1
 // 如果位移超過文字寬度，則回到起點(diǎn)
    if (-distance >= width) {
     distance = 16
    }
    box.style.transform = 'translateX(' + distance + 'px)'
   }, 20) 
  }
 },
// 把父組件傳入的arr轉(zhuǎn)化成字符串
 mounted: function () {
  for (let i = 0; i < this.lists.length; i++) {
   this.text += ' ' + this.lists[i]
  }
 },
// 更新的時候運(yùn)動
 updated: function () {
  this.move()
 }
}
</script>
<style scoped>
// 限制外框?qū)挾龋[藏多余的部分
.wrap {
 overflow: hidden;
}
// 移動框?qū)挾仍O(shè)置
#box {
 width: 80000%;
}
// 文字一行顯示
#box div {
 float: left;
}
// 設(shè)置前后間隔
#marquee {
  margin: 0 16px 0 0;
}
// 獲取寬度的節(jié)點(diǎn)，隱藏掉
#node {
 position: absolute;
 z-index: -999;
 top: -999999px;
}
</style>

父組件引入 import myMarquee from './my-marquee


使用并傳參： <my-marquee :lists="lists"></my-marquee>


參數(shù)：

data (){
 return {
  lists: [
    '連雨不知春去',
    '一晴方覺夏深'
  ]
 }
}

關(guān)于“如何使用vue實現(xiàn)文字橫向無縫走馬燈組件效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。