How to achieve seamless scrolling effect of messages in vue

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>

The second step is to place the message array and specific method in the <script> tag. </script>

<script>

 export default {
data() {
 return {
   animate:false,
   items:[  //消息列表对应的数组
     {name:"马云"},
     {name:"雷军"},
     {name:"王勤"}
   ]
 }
},
created(){
  setInterval(this.scroll,1000) // 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
},
methods: {
  scroll(){
    let con1 = this.$refs.con1;
    con1.style.marginTop=&#39;-30px&#39;;
    this.animate=!this.animate;
    var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
    setTimeout(function(){
        that.items.push(that.items[0]);
        that.items.shift();
        con1.style.marginTop=&#39;0px&#39;;
        that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
    },500)
  }
}
}
</script>

<style>

*{
  margin: 0 ;
  padding: 0;
}
#box{
  width: 300px;
  height: 32px;
  line-height: 30px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid black;
  transition: all 0.5s;
}
.anim{
  transition: all 0.5s;
}
#con1 li{
  list-style: none;
  line-height: 30px;
  height: 30px;
}
</style>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to deploy Angular projects to nginx

How to implement singleton mode using ES6

How to create a subprocess using node.js (detailed tutorial)

How to use slider to set data values ​​in WeChat applet

The above is the detailed content of How to achieve seamless scrolling effect of messages in vue. For more information, please follow other related articles on the PHP Chinese website!