vue实现⽂字横向⽆缝⾛马灯组件效果的实例代码marquee标签已经废弃了，只能⼿动实现⽂字⾛马灯样式
基于vue组件开发
<template>
<div class="wrap"> // 外框，固定宽度
<div id="box"> // 内部滚动框
<div id="marquee">{{text}}</div> //展⽰的⽂字
<div id="copy"></div> // ⽂字副本，为了实现⽆缝滚动
</div>
<div id="node">{{text}}</div> //为了获取text实际宽度
</div>
</template>
<script>
export default {
name: 'Marquee',
props: ['lists'], // ⽗组件传⼊数据，数组形式 [ "连⾬不知春去"，"⼀晴⽅觉夏深"]
data () {
return {
text: '' // 数组⽂字转化后的字符串
}
},
methods: {
move () {
/
/ 获取⽂字text 的计算后宽度（由于overflow的存在，直接获取不到，需要独⽴的node计算）
let width = ElementById('node').getBoundingClientRect().width
let box = ElementById('box')
let copy = ElementById('copy')
copy.innerText = // ⽂字副本填充
let distance = 0 // 位移距离
//设置位移
setInterval(function () {
distance = distance - 1
// 如果位移超过⽂字宽度，则回到起点
marquee marqueeif (-distance >= width) {
distance = 16
}
ansform = 'translateX(' + distance + 'px)'
}, 20)
}
},
// 把⽗组件传⼊的arr转化成字符串
mounted: function () {
for (let i = 0; i < this.lists.length; i++) {
< += ' ' + this.lists[i]
}
},
// 更新的时候运动
updated: function () {
}
}
</script>
<style scoped>
// 限制外框宽度，隐藏多余的部分
.wrap {
overflow: hidden;
}
// 移动框宽度设置
#box {
width: 80000%;
}
// ⽂字⼀⾏显⽰
#box div {
float: left;
}
// 设置前后间隔
#marquee {
margin: 0 16px 0 0;
}
// 获取宽度的节点，隐藏掉
#node {
position: absolute;
z-index: -999;
top: -999999px;
}
</style>
⽗组件引⼊import myMarquee from './my-marquee
使⽤并传参：<my-marquee :lists="lists"></my-marquee>
参数：
data (){
return {
lists: [
'连⾬不知春去',
'⼀晴⽅觉夏深'
]
}
}
总结
以上所述是⼩编给⼤家介绍的vue实现⽂字横向⽆缝⾛马灯组件效果的实例代码，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。