So erzielen Sie einen nahtlosen Scrolleffekt von Nachrichten in Vue

In diesem Artikel wird hauptsächlich der Beispielcode von Vue vorgestellt, um den nahtlosen Bildlaufeffekt von Nachrichten zu erzielen. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Lassen Sie uns dem Editor folgen und einen Blick darauf werfen.

Bei einem Projekt eines Freundes bin ich auf einen kleinen Fehler gestoßen, der nach dem Scrollen doppelt so lange blieb und wieder eine Schleife. Ich habe das Intervallproblem einen Tag lang studiert und schließlich dieses kleine 1S-Problem gelöst.

Projektumgebung vue-cli, bitte konfigurieren Sie die entsprechende Umgebung und das Routing selbst. Hier stellen wir hauptsächlich die Implementierungsmethode vor >

Der erste Schritt besteht darin, die v-for-Methode in der Vorlage zu verwenden, um die Nachrichtenliste auszuschleifen

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

Der zweite Schritt besteht darin, das Nachrichtenarray und die spezifische Methode im 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag zu platzieren .

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So stellen Sie Angular-Projekte auf Nginx bereit

So implementieren Sie den Singleton-Modus mit ES6

So erstellen Sie einen Unterprozess mit node.js (ausführliches Tutorial)

So verwenden Sie den Schieberegler, um Datenwerte im WeChat-Miniprogramm festzulegen

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen nahtlosen Scrolleffekt von Nachrichten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!