实现单行文字水平滚动，在网上看了一个vue插件 marquee-components
安装 npm i marquee-components
使用 在main.js中引入
代码语言：javascript复制import marquee from 'marquee-components'
Vue.use(marquee );在页面中使用
代码语言：javascript复制<template>
<div id="app">
<marquee :val="msg"></marquee>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
}
}
}
</script>如果直接引入组件
代码语言：javascript复制<template>
<div class="marquee-wrap">
<div class="scroll">
<p class="marquee">{{text}}</p>
<p class="copy"></p>
</div>
<p class="getWidth">{{text}}</p>
</div>
</template>
<script>
export default {
name: 'marquee',
props: ['val'],
data () {
return {
timer: null,
text: ''
}
},
created () {
let timer = setTimeout(() => {
this.move()
clearTimeout(timer)
}, 1000)
},
mounted () {
for (let item of this.val) {
this.text = ' ' item
}
},
methods: {
move () {
let maxWidth = document.querySelector('.marquee-wrap').clientWidth
let width = document.querySelector('.getWidth').scrollWidth
if (width <= maxWidth) return
let scroll = document.querySelector('.scroll')
let copy = document.querySelector('.copy')
copy.innerText = this.text
let distance = 0
this.timer = setInterval(() => {
distance -= 1
if (-distance >= width) {
distance = 16
}
scroll.style.transform = 'translateX(' distance 'px)'
}, 20)
}
},
beforeDestroy () {
clearInterval(this.timer)
}
}
</script>
<style scoped>
.marquee-wrap {
width: 100%;
overflow: hidden;
position: relative;
}
.marquee{
margin-right: 16px;
}
p {
word-break:keep-all;
white-space: nowrap;
font-size: 16px;
font-family: "微软雅黑 Light";
}
.scroll {
display: flex;
}
.getWidth {
word-break:keep-all;
white-space:nowrap;
position: absolute;
opacity: 0;
top: 0;
}
</style>其他页面引用
代码语言：javascript复制<template>
<div class="container">
<marquee :val="title"></marquee>
</div>
</template>
<script>
import marquee from './marquee'
name: 'index',
components: {
marquee
},
data () {
return {
title: ''
}
},
</script>但是如果一个页面有几个需要滚动的文字，需要修改代码，主要把原代码的通过选择器获取元素的方式 修改为通过通过ref获取元素
代码语言：javascript复制<template>
<div>
<div class="marquee-wrap" ref="marqueeWrap">
<div class="scroll" ref="scroll">
<p class="marquee" ref="marquee">{{text}}</p>
<p class="copy" ref="copy" v-if="showCopy">{{text}}</p>
</div>
<p class="getWidth" ref="getWidth">{{text}}</p>
</div>
</div>
</template>
<script>
import { clearTimeout } from 'highcharts';
export default {
name:"marquee",
props:['val'],
data() {
return {
timer:null,
creatTimer:null,
watchTimer:null,
text:'',
showCopy:true
};
},
created(){
this.creatTimer = setTimeout(() => {
this.move()
clearTimeout(this.creatTimer)
}, 1000);
},
mounted(){
console.log("hi")
console.log(this.val)
for(let item of this.val){
this.text =' ' item
}
console.log(this.text)
},
methods: {
move(){
this.$nextTick(()=>{
console.log("move")
let maxWidth = this.$refs.marqueeWrap.clientWidth
let width = this.$refs.getWidth.scrollWidth
let scroll = this.$refs.scroll
if(width<maxWidth){
this.showCopy = false
scroll.style.transform = 'translateX(0px)'
clearInterval(this.timer)
return
}else{
this.showCopy = true
}
// let copy = this.$refs.copy
console.log(this.text)
// copy.innerText = this.text
let distance = 0
clearInterval(this.timer)
this.timer = setInterval(() => {
distance-=1
if(-distance >= width){
distance = 16
}
scroll.style.transform = 'translateX(' distance 'px)'
}, 20);
})
}
},
watch:{
val(newValue){
clearTimeout(this.watchTimer)
this.watchTimer = setTimeout(() => {
let text=""
this.text = ""
for(let item of newValue){
text =' ' item
}
this.text = text
console.log(this.text)
// clearInterval(this.timer)
this.move()
}, 2000);
}
},
beforeDestroy(){
clearInterval(this.timer)
clearInterval(this.creatTimer)
}
};
</script>
<style scoped>
.marquee-wrap{
width:100%;
overflow:hidden;
position: relative;
}
.marquee{
margin-right:16px;
}
p{
word-break:keep-all;
white-space: nowrap;
}
.scroll{display: flex;}
.getWidth{
word-break:keep-all;
white-space: nowrap;
position: absolute;
opacity: 0;
top:0
}
</style>
