How to achieve seamless scrolling effect of messages in vue-JS Tutorial-php.cn

This article mainly introduces the sample code of Vue to achieve the seamless scrolling effect of messages. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

In my friend’s project, I wanted to achieve the effect of seamless scrolling of messages. I encountered a small bug in the process. Each group of messages would stay twice as long after scrolling and looping again. I studied the interval problem for a day and finally solved this 1S small problem

Project environment vue-cli, please configure the corresponding environment and routing by yourself. Here we mainly introduce the implementation method

The first step is to use the v-for method in the template to loop out the message list

<template>

<p id="box">
  <ul id="con1" ref="con1" :class="{anim:animate==true}">
    <li v-for=&#39;item in items&#39;>{{item.name}}</li>
  </ul>
</p>
</template>

Copy after login

The second step is to place the message array and specific method in the