How to realize horizontal scrolling of horse racing lantern style text by Vue

This article mainly introduces Vue how to achieve racing lantern style text horizontal scrolling, the article is very detailed, has a certain reference value, interested friends must read it!

Demand:

At the top of the Vue project, scroll the text left and right

Steps:

1. You can encapsulate a component yourself, write it yourself, or copy the following code

2. After the encapsulation is completed, it is necessary to introduce, register, and use the required components

Code:

Encapsulate a component specially used to achieve the effect of horse racing lantern 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 = this.$refs ['marquee-wrap']. ClientWidth let width = this.$refs [' 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: 0.16remt;} p {word-break:keep-all; white-space:nowrap; font-size: 0.28remr;} .getWidth {word-break:keep-all; white-space:nowrap; position: absolute; opacity: 0; top: 0;}

In which component is used, introduce

/ / introduce the racing lantern component import marquee from "@ / components/marquee/marquee.vue"

Reference and register

Export default {components: {/ / register racing lantern assembly marquee,},}

After registration, the next step is the Html style, which is used in the template template

{{item.city}}

Then there is the effect picture:

In order to get a more obvious effect, I took a few more pictures.

The above is all the contents of this article "how to achieve horizontal scrolling of text in the style of horse racing lanterns in Vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!