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

基于vue組件開發(fā)

<template> <div class="wrap"> // 外框，固定寬度  <div id="box"> // 內(nèi)部滾動(dòng)框   <div id="marquee">{{text}}</div> //展示的文字   <div id="copy"></div> // 文字副本，為了實(shí)現(xiàn)無縫滾動(dòng)  </div>  <div id="node">{{text}}</div> //為了獲取text實(shí)際寬度 </div></template><script>export default { name: 'Marquee', props: ['lists'], // 父組件傳入數(shù)據(jù)， 數(shù)組形式 [ "連雨不知春去"，"一晴方覺夏深"] data () {  return {   text: '' // 數(shù)組文字轉(zhuǎn)化后的字符串  } }, methods: {  move () {// 獲取文字text 的計(jì)算后寬度 （由于overflow的存在，直接獲取不到，需要獨(dú)立的node計(jì)算）   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]  } },// 更新的時(shí)候運(yùn)動(dòng) updated: function () {  this.move() }}</script><style scoped>// 限制外框?qū)挾龋[藏多余的部分.wrap { overflow: hidden;}// 移動(dòng)框?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: [    '連雨不知春去',    '一晴方覺夏深'  ] }}

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)文字橫向無縫走馬燈組件效果的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！