Comment écrire des nouvelles en continu

Vue est un framework front-end populaire, et son idée principale est le développement de composants. Son style de développement basé sur des composants le rend idéal pour créer des interfaces interactives et des applications complexes d'une seule page. Dans Vue, nous pouvons facilement implémenter le composant d'actualités défilantes. Dans cet article, nous présenterons comment implémenter un composant d'actualités défilant à l'aide de Vue.

Structure HTML

Tout d'abord, nous devons définir la structure HTML du composant d'actualités défilant. Voici une structure HTML de base :

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

Parmi eux, news-container est le conteneur du composant d'actualités défilant, news-list est le conteneur de la liste d'actualités et news-item est le conteneur de chaque actualité. Nous pouvons définir plus de styles et de structures HTML en fonction de nos besoins.

Composant Vue

Ensuite, nous devons définir le composant d'actualités défilantes dans Vue. Voici un composant Vue de base :

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

Le code ci-dessus définit un composant Vue nommé ScrollNews, qui accepte deux attributs props : delay et newsList. L'attribut delay indique le nombre de millisecondes à parcourir et l'attribut newsList indique la liste des actualités. Dans le composant, nous utilisons la directive v-for pour afficher la liste d'actualités en boucle. La propriété currentIndex représente l'index de l'actualité en cours d'affichage.

Dans la fonction hook créée, nous appelons la méthode startTimer pour démarrer le minuteur, qui est utilisé pour faire défiler les actualités régulièrement. Dans la méthode startTimer, nous utilisons la méthode setInterval pour mettre régulièrement à jour la propriété currentIndex. Si la valeur de currentIndex dépasse la longueur de newsList moins 1, réinitialisez currentIndex à 0. Cela permet un défilement infini.

Styles

Enfin, nous devons ajouter des styles au composant d'actualités défilant. Voici un style CSS de base :

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

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

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

Nous définissons le débordement du conteneur de nouvelles sur caché pour masquer le contenu au-delà de son conteneur. Les styles de liste d'actualités et d'actualité sont uniquement destinés à l'embellissement.

Utilisation des composants

Après avoir défini le composant d'actualités défilantes, nous pouvons l'utiliser dans l'application Vue. Voici un exemple d'utilisation du composant ScrollNews :

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

Dans le code ci-dessus, nous utilisons le composant ScrollNews dans l'application Vue et lui passons l'attribut props. L'attribut newsList est un tableau contenant une liste d'actualités et l'attribut delay indique un défilement toutes les 3 000 millisecondes.

Résumé

Dans cet article, nous avons présenté comment utiliser Vue pour implémenter un composant d'actualités défilant. Nous avons d'abord défini la structure et le style HTML, puis défini le composant ScrollNews dans Vue et implémenté la fonction de défilement infini. Enfin, nous avons montré comment utiliser le composant ScrollNews dans une application Vue.

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!