Heim > Web-Frontend > js-Tutorial > So erzielen Sie einen nahtlosen Scrolleffekt von Nachrichten in Vue

So erzielen Sie einen nahtlosen Scrolleffekt von Nachrichten in Vue

亚连
Freigeben: 2018-06-22 17:10:29
Original
3202 Leute haben es durchsucht

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>
Nach dem Login kopieren

Der zweite Schritt besteht darin, das Nachrichtenarray und die spezifische Methode im
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage