Wie schreibt man Vue-Rolling-News?

Vue ist ein beliebtes Front-End-Framework, dessen Kernidee die Komponentenentwicklung ist. Sein komponentenbasierter Entwicklungsstil macht es ideal für die Erstellung interaktiver Schnittstellen und komplexer Single-Page-Anwendungen. In Vue können wir die scrollende Nachrichtenkomponente problemlos implementieren. In diesem Artikel stellen wir vor, wie man mit Vue eine scrollende Nachrichtenkomponente implementiert.

HTML-Struktur

Zuerst müssen wir die HTML-Struktur der scrollenden Nachrichtenkomponente definieren. Das Folgende ist eine grundlegende HTML-Struktur:

<div class="news-container">
  <ul class="news-list">
    <li class="news-item">新闻内容1</li>
    <li class="news-item">新闻内容2</li>
    <li class="news-item">新闻内容3</li>
    <li class="news-item">新闻内容4</li>
    <li class="news-item">新闻内容5</li>
    <li class="news-item">新闻内容6</li>
  </ul>
</div>

Darunter ist News-Container der Container der Scroll-News-Komponente, News-List der Container der News-Liste und News-Item der Container jeder Nachricht. Wir können je nach Bedarf weitere Stile und HTML-Strukturen festlegen.

Vue-Komponente

Als nächstes müssen wir die scrollende Nachrichtenkomponente in Vue definieren. Das Folgende ist eine grundlegende Vue-Komponente:

<template>
  <div class="news-container">
    <ul class="news-list">
      <li v-for="news in newsList" class="news-item">{{ news }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ScrollNews",
  props: {
    delay: {
      type: Number,
      default: 3000,
    },
    newsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  created() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > this.newsList.length - 1) {
          this.currentIndex = 0;
        }
      }, this.delay);
    },
  },
};
</script>

Der obige Code definiert eine Vue-Komponente namens ScrollNews, die zwei Requisitenattribute akzeptiert: Verzögerung und NewsList. Das Verzögerungsattribut gibt an, wie viele Millisekunden gescrollt werden müssen, und das NewsList-Attribut gibt die Nachrichtenliste an. In der Komponente verwenden wir die v-for-Direktive, um die Nachrichtenliste in einer Schleife darzustellen. Die Eigenschaft currentIndex stellt den Index des aktuell angezeigten Nachrichtenelements dar.

In der erstellten Hook-Funktion rufen wir die startTimer-Methode auf, um den Timer zu starten, der zum regelmäßigen Scrollen von Nachrichten verwendet wird. In der Methode startTimer verwenden wir die Methode setInterval, um die Eigenschaft currentIndex regelmäßig zu aktualisieren. Wenn der Wert von currentIndex die Länge von newsList minus 1 überschreitet, setzen Sie currentIndex auf 0 zurück. Dies ermöglicht endloses Scrollen.

style

Schließlich müssen wir der scrollenden Nachrichtenkomponente Stile hinzufügen. Hier ist ein grundlegender CSS-Stil:

.news-container {
  width: 100%;
  overflow: hidden;
}

.news-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.news-item {
  line-height: 30px;
  margin-bottom: 10px;
}

Wir setzen den Überlauf des News-Containers auf versteckt, um Inhalte außerhalb seines Containers zu verbergen. Die Stile „News-List“ und „News-Item“ dienen nur der Verschönerung.

Komponenten verwenden

Nachdem wir die Scrolling-News-Komponente definiert haben, können wir sie in der Vue-Anwendung verwenden. Hier ist ein Beispiel für die Verwendung der ScrollNews-Komponente:

<template>
  <div>
    <scroll-news :news-list="newsList" :delay="3000"></scroll-news>
  </div>
</template>

<script>
import ScrollNews from "./ScrollNews.vue";

export default {
  name: "App",
  components: {
    ScrollNews,
  },
  data() {
    return {
      newsList: [
        "新闻内容1",
        "新闻内容2",
        "新闻内容3",
        "新闻内容4",
        "新闻内容5",
        "新闻内容6",
      ],
    };
  },
};
</script>

Im obigen Code verwenden wir die ScrollNews-Komponente in der Vue-Anwendung und übergeben ihr das props-Attribut. Das Attribut „newsList“ ist ein Array, das eine Nachrichtenliste enthält, und das Attribut „delay“ gibt an, dass alle 3000 Millisekunden gescrollt wird.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man mit Vue eine scrollende Nachrichtenkomponente implementiert. Wir haben zuerst die HTML-Struktur und den HTML-Stil definiert, dann die ScrollNews-Komponente in Vue definiert und die Funktion zum unendlichen Scrollen implementiert. Abschließend haben wir gezeigt, wie man die ScrollNews-Komponente in einer Vue-Anwendung verwendet.

Das obige ist der detaillierte Inhalt vonWie schreibt man Vue-Rolling-News?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!