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

This article mainly introduces Vue how to achieve the list of horse racing lantern effect related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this Vue how to achieve the list racing lantern effect article will have a harvest, let's take a look.

In the Vue file:

{{item.title | ellipsis}} {{item.date}}

Js:

Export default {data:function () {return {timeId:null, / / Lantern animate:false,};}, filters: {}, methods: {/ / Lantern scroll () {this.animate = true / / because you need to add css3 transition animation when the message scrolls up, so you need to set true setTimeout (()) = > {/ / the arrow function of es6 is directly used here, which eliminates the need to deal with the problem of this pointing offset, and the code is much simpler than before (this.TZGGList [0]). / / add the first element of the array to the this.TZGGList.shift () of the array / / cancel the transition animation when the first element of the array this.animate = false / / margin-top is 0, achieve seamless scrolling}, 1000)}, / / hover, stop scrolling stopScroll () {var target = this.$refs.con1 ClearInterval (this.timeId)}, / / move the mouse away, then scroll startScroll () {var target = this.$refs.con1; this.timeId = setInterval (this.scroll,1500); / / set sliding speed},}, mounted: function () {this.init () This.timeId=setInterval (this.scroll,1500);},}

Css:

/ * Happy Lantern * / # box {height: 238px; overflow: hidden; border: 1px solid # ffffff; margin-top: 0px;} .anim {transition: all 2s;} # con1 li {list-style: none; line-height: 35px; height: 35px;}

During the operation, it is found that the title of the walking lantern can be scrolled but the content of the corresponding span tag remains the same. It may be because the browser version is too high, so you can change the browser or try to lower the browser version.

This is the end of the article on "how to achieve the effect of list racing lanterns in Vue". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve the effect of list racing lanterns in Vue". If you want to learn more, you are welcome to follow the industry information channel.

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.