vue内容横向循环滚动_Vue替代marquee标签超出宽度文字横向滚动效果

一、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标签超出宽度文字横向滚动效果，希望对大家有所帮助

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！