Comment obtenir un effet de défilement transparent des messages en vue

Cet article présente principalement l'exemple de code de Vue pour obtenir l'effet de défilement transparent des messages. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil.

Dans le projet d'un ami, je voulais obtenir un effet de défilement transparent des messages. J'ai rencontré un petit bug dans le processus. Chaque groupe de messages restait deux fois plus longtemps après le défilement. et en boucle. J'ai étudié le problème des intervalles pendant une journée et j'ai finalement résolu ce petit problème 1S

Environnement du projet vue-cli, veuillez configurer vous-même l'environnement et le routage correspondants

La première étape consiste à utiliser la méthode v-for dans le modèle pour boucler la liste des messages

<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>

La deuxième étape consiste à placer le tableau de messages et la méthode spécifique dans le

<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>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment déployer des projets Angular sur nginx

Comment implémenter le mode singleton à l'aide d'ES6

Comment créer un sous-processus à l'aide de node.js (tutoriel détaillé)

Comment utiliser le curseur pour définir les valeurs des données dans le mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!