Comment implémenter une liste déroulante infinie avec Vue ?

Dans les applications Web, les listes déroulantes sont un moyen très courant d'afficher des données, tandis que les listes déroulantes infinies sont un moyen de charger dynamiquement plus de données. Il n'est pas difficile d'implémenter une liste déroulante infinie dans Vue Avec quelques opérations simples, nous pouvons facilement implémenter une liste déroulante infinie.

1. Préparer les données

Tout d'abord, nous devons préparer les données à afficher. Généralement, ces données sont obtenues via des interfaces. Dans cet exemple, nous pouvons utiliser une fausse source de données pour simuler l'obtention de données :

const data = [
  { id: 1, content: '第1条数据' },
  { id: 2, content: '第2条数据' },
  { id: 3, content: '第3条数据' },
  { id: 4, content: '第4条数据' },
  { id: 5, content: '第5条数据' },
  { id: 6, content: '第6条数据' },
  { id: 7, content: '第7条数据' },
  { id: 8, content: '第8条数据' },
  { id: 9, content: '第9条数据' },
  { id: 10, content: '第10条数据' }
];

2. Réaliser un défilement infini

Ensuite, nous devons utilisez l'instruction v-infinite-scroll de Vue pour obtenir un défilement infini. Tout d'abord, dans notre modèle, nous avons besoin d'un conteneur pour afficher les données, et définir une directive pour ce conteneur, comme indiqué ci-dessous : v-infinite-scroll 来实现无限滚动。首先，在我们的模板中，需要有一个容器来展示数据，并且给这个容器设置一个指令，如下所示：

<div class="list" v-infinite-scroll="loadMore">
  <div v-for="item in items" :key="item.id" class="item">{{ item.content }}</div>
</div>

在这里，我们通过 v-infinite-scroll 指令来触发对应的方法 loadMore，这个方法将根据当前展示的数据来动态加载更多数据。另外，在这个容器中，我们使用了 v-for 指令来遍历整个数据列表，并将其展示到页面上。

接下来，我们需要实现 loadMore 方法。在这个方法中，首先获取当前数据列表中最后一条数据的下标 lastIndex，然后使用一些异步操作来动态加载更多的数据，并将这些数据添加到当前的数据列表中。

methods: {
  loadMore() {
    const lastIndex = this.items.length - 1;
    const lastItem = this.items[lastIndex];
    const nextIndex = lastItem.id + 1;

    setTimeout(() => {
      const newData = data
        .slice(nextIndex - 1, nextIndex + 9)
        .map(item => {
          return {
            id: item.id,
            content: item.content
          };
        });

      this.items = [...this.items, ...newData];
    }, 1000);
  }
}

在这里，我们通过 setTimeout 来模拟异步加载数据的操作。首先，获取当前数据列表中最后一条数据的下标 lastIndex，并将其作为加载更多数据的起始点。然后，通过 slice 方法来截取数据源中的一段数据，并通过 map 方法来将其转换为当前应用使用的数据格式。最后，将这些新数据添加到当前的数据列表中。

需要注意的是，我们在加载数据时并没有一次性加载全部数据，而是通过 slice

<template>
  <div class="list" v-infinite-scroll="loadMore">
    <div v-for="item in items" :key="item.id" class="item">{{ item.content }}</div>
  </div>
</template>

<script>
const data = [
  { id: 1, content: '第1条数据' },
  { id: 2, content: '第2条数据' },
  { id: 3, content: '第3条数据' },
  { id: 4, content: '第4条数据' },
  { id: 5, content: '第5条数据' },
  { id: 6, content: '第6条数据' },
  { id: 7, content: '第7条数据' },
  { id: 8, content: '第8条数据' },
  { id: 9, content: '第9条数据' },
  { id: 10, content: '第10条数据' }
];

export default {
  data() {
    return {
      items: data.slice(0, 10).map(item => {
        return {
          id: item.id,
          content: item.content
        };
      })
    };
  },

  methods: {
    loadMore() {
      const lastIndex = this.items.length - 1;
      const lastItem = this.items[lastIndex];
      const nextIndex = lastItem.id + 1;

      setTimeout(() => {
        const newData = data
          .slice(nextIndex - 1, nextIndex + 9)
          .map(item => {
            return {
              id: item.id,
              content: item.content
            };
          });

        this.items = [...this.items, ...newData];
      }, 1000);
    }
  }
};

Ici, nous passons v-infinite-scroll directive pour déclencher la méthode correspondante loadMore Cette méthode chargera dynamiquement plus de données en fonction des données actuellement affichées. De plus, dans ce conteneur, nous utilisons la directive v-for pour parcourir toute la liste de données et l'afficher sur la page.

3. Ensuite, nous devons implémenter la méthode loadMore. Dans cette méthode, obtenez d'abord l'indice lastIndex des dernières données de la liste de données actuelle, puis utilisez certaines opérations asynchrones pour charger dynamiquement plus de données et ajouter ces données à la liste de données actuelle.
rrreee

Ici, nous utilisons setTimeout pour simuler l'opération de chargement de données de manière asynchrone. Tout d’abord, récupérez l’index lastIndex du dernier élément de données de la liste de données actuelle et utilisez-le comme point de départ pour charger davantage de données. Ensuite, utilisez la méthode slice pour intercepter une donnée de la source de données, et utilisez la méthode map pour la convertir dans le format de données utilisé par l'application actuelle. Enfin, ajoutez ces nouvelles données à la liste de données actuelle.

Il convient de noter que lors du chargement des données, nous n'avons pas chargé toutes les données en même temps, mais avons uniquement chargé les dix éléments de données suivants à chaque fois via la méthode slice. L'avantage de ceci est que cela peut améliorer les performances de l'application et éviter de charger une grande quantité de données en même temps, ce qui pourrait entraîner une charge excessive sur l'application.

#🎜🎜#Code complet#🎜🎜##🎜🎜##🎜🎜#Ce qui suit est l'exemple de code complet, y compris la préparation des données, la mise en œuvre du modèle et de la méthode. #🎜🎜#rrreee#🎜🎜#Dans cet exemple, nous utilisons une fausse source de données pour simuler l'opération d'obtention de données. Dans les applications pratiques, nous devons utiliser notre propre source de données, puis charger dynamiquement davantage de données via des opérations asynchrones. Avec une opération aussi simple, nous pouvons implémenter une liste déroulante infinie basée sur 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!