Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how Vue replaces marquee tags beyond the width of text horizontal scrolling effect". In the operation of actual cases, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Npm installation

Installation

# install dependenciesnpm i marquee-components

Use

Introduce in main.js

Import marquee from 'marquee-components'Vue.use (marquee)

Use on the page

Export default {name: 'app', data () {return {msg:' vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'}

Val can be followed by text, when the length of the text container is exceeded, the horizontal scrolling effect is triggered.

Second, direct introduction of components

Marquee component

{{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 {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: "Microsoft Yahi Light";} .word-break:keep-all; white-space:nowrap; position {display: flex;} .getWidth {word-break:keep-all; white-space:nowrap; position: absolute; opacity: 0; top: 0;}

Other pages introduce marquee components

Import marquee from'. / marquee' name: 'index', components: {marquee}, data () {return {title:''}}, "how to replace marquee tags beyond the width of text horizontal scrolling effect" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.