vue中实现文字超出横向滚动
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(() => {
      this.move()
      clearTimeout(timer)
    }, 1000)
  },
  mounted () {
    for (let item of this.val) {
    this.text += 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 = 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: 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>

使用marquee组件
//引入组件
import Marquee from './marquee'
//注册并使用
<Marquee :val=""></Marquee>

不使用任何js代码如何实现一段很长的文字横向滚动？
纯css实现文字循环滚动效果
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
margin: 0 auto;
position: relative;
border: 1px solid #ff6700;
}
.animate {
padding-left: 20px;
font-size: 12px;
color: #000;
white-space: nowrap;
animation: 15s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes wordsLoop {
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
君不见黄河之水天上来，奔流到海不复回，君不见高堂明镜悲白发，朝如青丝暮成雪，人生得意须尽欢，莫使金樽空对月
上面是我自己的实现，但总是到“金”这里横向滚动就结束了，要怎么解决一下？

一、npm 安装
如果你想安装插件（自己写的）
安装
# install dependencies
npm i marquee-components


使用
在main.js引入
import marquee from 'marquee-components'
Vue.use(marquee );

在页面使用
<template>
  <div id="app">
       <marquee :val="msg"></marquee>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
    }
  }
}
</script>

val后加文字即可，当超过文本容器长度时，触动横向滚动效果。
二、直接引入组件
marquee组件
<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>


其他页面引入marquee组件
<template>
  <div class="container">
        <marquee :val="title"></marquee>
  </div>
</template>
<script>
import marquee from './marquee'
 name: 'index',
 components: {
    marquee
 },
  data () {
    return {
		title: ''
    }
  },
</script>

一、npm 安装
如果你想安装插件(自己写的)
安装
# install dependencies
npm i marquee-components
使用
在main.js引入
import marquee from 'marquee-components'
vue.use(marquee );
在页面使用
export default {
name: 'app',
data () {
return {
msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
}
}
}
val后加文字即可，当超过文本容器长度时，触动横向滚动效果。
二、直接引入组件
marquee组件
{{text}}
{{text}}
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)
}
}
.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;
}
其他页面引入marquee组件
import marquee from './marquee'
name: 'index',
components: {
marquee
},
data () {
return {
title: ''
}
},
总结
以上所述是小编给大家介绍的vue替代marquee标签超出宽度文字横向滚动效果，希望对大家有所帮助
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！