Vue+跑马灯样式实现⽂字横向滚动完善版（⿏标移⼊停⽌滚动，移出继续滚动）需求:
在Vue项⽬的顶部，来实现⽂字左右滚动，在⿏标移⼊的时候停⽌滚动,⿏标移出的时候继续滚动
步骤:
1. 可以⾃⼰封装⼀个组件，也可以⾃⼰写，也可以复制以下代码
2. 封装完成以后要在所需的组件中引⼊，注册，并使⽤
代码:
封装⼀个专门⽤来实现跑马灯效果的组件marquee组件
<template>
<!--跑马灯组件-->
<div class="marquee-wrap" ref="marquee-wrap">
<div class="scroll" ref="scroll">
<p class="marquee">{{text}}</p>
<p class="copy" ref="copy"></p>
</div>
<p class="getWidth" ref="getWidth">{{text}}</p>
</div>
</template>
<script>
export default{
name:'marquee',
props:['val'],
data(){
return{
timer:null,
text:''
}
},
created(){
let timer =setTimeout(()=>{
clearTimeout(timer)
},1000)
},
mounted(){
for(let item of this.val){
< += item
}
},
methods:{
move(){
let maxWidth =this.$refs['marquee-wrap'].clientWidth
let width =this.$refs['getWidth'].scrollWidth
if(width <= maxWidth)return
let scroll =this.$refs['scroll']
let copy =this.$refs['copy']
copy.innerText =
let distance =0
this.timer =setInterval(()=>{
distance -=1
if(-distance >= width){
distance =16
}
ansform ='translateX('+ distance +'px)'
},20)
}
},
beforeDestroy(){
clearInterval(this.timer)
}
}
</script>
<style scoped>
.marquee-wrap {
width:100%;
overflow: hidden;
position: relative;marquee marquee
}
.marquee{
margin-right:0.16rem;
}
p {
word-break:keep-all;
white-space: nowrap;
font-size:0.28rem;
}
.scroll {
display: flex;
}
.getWidth {
word-break:keep-all;
white-space:nowrap;
position: absolute;
opacity:0;
top:0;
}
</style>
在哪个组件中使⽤，就引⼊
// 引⼊跑马灯组件
import  marquee  from"@/components/marquee/marquee.vue";
引⽤并注册
export default{
components:{
// 注册跑马灯组件
marquee,
},
}
以下代码是⿏标移⼊移出的重点。
align="left"
behavior="scroll"
bgcolor="#FF0000"
hspace="50"
vspace="20"
loop="-1"
scrolldelay="100"
onMouseOut="this.start()"
onMouseOver="this.stop()"
注册完成以后接下来就是Html样式了，在template模板中使⽤这个组件
<Marquee
class="realData"
align="left"
behavior="scroll"
bgcolor="#FF0000"
hspace="50"
vspace="20"
loop="-1"
scrolldelay="100"
onMouseOut="this.start()"
onMouseOver="this.stop()"
>
<ul class="fa-scroll-cont">
<li v-for="item in realData":key="item.name">
<span>{{ item.name }}:</span>
<span class="roll-text">{{ item.city }}</span>
</li>
</ul>
</Marquee>

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