Vue简短代码实现⽂字⾸尾⽆缝跑马灯效果
Vue简短代码实现⽂字⾸尾⽆缝跑马灯效果
写在前⾯
由于HTML⾃带的marquee标签⽆法做到上⼀条⽂本和下⼀条⽂本⽆缝衔接，并且HTML标准已将其废弃，所以结合⽹上的资源⾃⼰写了⼀个，代码不多，仅能横向滚动，可滚动重复滚动⼀条或多条⽂本，字数不限制，若想要实现纵向滚动可使⽤vux组件库的。
效果图
gif动图展⽰出来看起来很卡，实际效果并不卡哦
跑马灯⼦组件代码
<template>
<div class="marquee-wrap">
<!--滚动内容-->
<div class="scroll">
<p class="marquee">{{text}}</p>
<!--⽂字副本-->
<p class="copy"></p>
</div>
<!--为了计算总⽂本宽度，通过css在页⾯中隐藏-->
<p class="getWidth">{{text}}</p>
</div>
</template>
<script>
export default{
props:['lists'],// ⽗组件传过来的数组
data(){
return{
timer:null,
text:''
}
created(){
// 进⼊页⾯等⼀秒才开始滑动
html滚动效果代码let timer =setTimeout(()=>{
clearTimeout(timer)
},1000)
},
// 把⽗组件传⼊的arr转化成字符串
mounted(){
for(let item of this.lists){
< +=' '+ item
}
},
methods:{
move(){
let maxWidth = document.querySelector('.marquee-wrap').clientWidth
// 获取⽂字text 的计算后宽度（由于overflow的存在，直接获取不到，需要独⽴的node计算）let width = document.querySelector('.getWidth').scrollWidth
// 如果⽂本内容的宽度⼩于页⾯宽度，则表⽰⽂字⼩于等于⼀⾏，则不需要滚动
if(width <= maxWidth)return
let scroll = document.querySelector('.scroll')
let copy = document.querySelector('.copy')
copy.innerText = // ⽂字副本填充
let distance =0// 位移距离
// 设置位移
this.timer =setInterval(()=>{
distance -=1
// 如果位移超过⽂字宽度，则回到起点
if(-distance >= width){
distance =16// 距离必须与marquee的margin宽度相同
}
ansform ='translateX('+ distance +'px)'
},20)
}
},
beforeDestroy(){
/
/ 清除计时器
clearInterval(this.timer)
}
}
</script>
<style scoped lang='less'>
.marquee-wrap {
width:100%;
overflow: hidden;
position: relative;
.scroll {
display: flex;
p{
word-break:keep-all;// 不换⾏
white-space:nowrap;
/* 设置前后间隔 */
&.marquee {
margin-right:16px;
}
}
}
/* 仅为了获取宽度，故隐藏掉 */
.
getWidth {
word-break:keep-all;// 不换⾏
white-space:nowrap;
position: absolute;
opacity:0;
top:0;
}
</style>
⽗组件代码
<template>
<div class="notice">
<!--喇叭图⽚，可删除-->
<img class="icon-notice" src="./image/喇叭.png"/>
<marquee :lists="lists"></marquee>
</div>
</template>
<script>
// 引⼊跑马灯组件
import marquee from'./marquee'
export default{
data(){
return{
/
/ 要展⽰的数据，以数组的形式
lists:['未认证⽤户不能报名，每⼈每次只能预约⼀个时段的健⾝项⽬，快来健⾝吧'] }
},
components:{
marquee
}
}
</script>
<style lang="less" scoped>
.notice{
padding:16/75rem 28/75rem;
font-size:24/75rem;
color:#929292;
line-height:38/75rem;
display: flex;
align-items: center;
.icon-notice {
width:25/75rem;
height:21/75rem;
margin-right:14/75rem;
}
}
</style>
若有错误，请指正，谢谢?

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