Comment créer une disposition de défilement infini et de flux en cascade à l'aide de Vue ?

Vue.js est un framework JavaScript populaire qui permet aux développeurs de créer facilement des applications Web dynamiques et réactives. Parmi eux, il est particulièrement apprécié par les développeurs pour ses puissantes capacités de développement de composants. Le défilement infini et la mise en page en cascade sont devenus l'une des fonctionnalités indispensables du développement Web moderne.

Cet article vise à présenter comment utiliser Vue.js, combiné avec certaines bibliothèques tierces, pour implémenter des fonctions de défilement infini et de mise en page en cascade.

Réaliser un défilement infini

Le défilement infini fait référence au fait de continuer à charger plus de contenu lors du défilement vers le bas de la page, permettant ainsi une expansion infinie du contenu de la page. Cette technique fonctionne pour des milliers de saisies de données et peut grandement améliorer l'expérience utilisateur.

Préparation de la source de données

Nous devons d'abord préparer une source de données, qui contient au moins quelques éléments de données. Ici, nous utilisons un exemple simple pour illustrer, en supposant que nous ayons une liste déroulante à l'infini contenant 100 éléments de données, la source de données peut ressembler à ceci :

[
  {id: 1, text: 'Item 1'},
  {id: 2, text: 'Item 2'},
  // ... more data
  {id: 99, text: 'Item 99'},
  {id: 100, text: 'Item 100'},
]

Installez et utilisez la bibliothèque vue-infinite-scroll

Ensuite, nous devons installer un bibliothèque appelée vue-infinite-scroll, qui fournit le mécanisme de base de la fonctionnalité de défilement infini, ainsi que les directives et composants nécessaires. Pour installer cette bibliothèque, vous pouvez utiliser la commande npm :

npm install vue-infinite-scroll

Enregistrez globalement les instructions requises :

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

Dans notre composant, nous devons définir certaines configurations et données :

<template>
  <div class="scroll-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>
    <div v-if="busy" class="loading">
      Loading ...
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        this.items = [...this.items, ...newItems]
        // 增加当前页数
        this.page++
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}
</script>

Description du code

• v- infinite -scroll="loadMore" : utilisé pour spécifier la fonction de rappel pour charger plus de donnéesv-infinite-scroll="loadMore"：用于指定加载更多数据的回调函数
• infinite-scroll-disabled="busy"：用于指定当前是否正在请求数据
• infinite-scroll-distance="10"
infinite-scroll-disabled="busy" : utilisé pour spécifier si des données sont actuellement demandées

infinite-scroll-distance="10" : utilisé pour déclencher le comportement de chargement des données lors de la spécification du nombre de pixels de la barre de défilement à partir du bas

implémentation de la disposition du flux en cascade

Waterfall est un Disposition commune, son concept de base est le suivant : des éléments de différentes tailles peuvent apparaître dans la même rangée et la disposition du flux en cascade s'ajuste automatiquement en fonction du nombre d'éléments. Nous pouvons utiliser une bibliothèque de composants tiers Vue appelée vue-waterfall pour implémenter facilement une disposition en cascade avec seulement quelques lignes de code.

Installer et utiliser la bibliothèque vue-waterfall

Tout d'abord, nous devons installer la bibliothèque de composants vue-waterfall :

npm install vue-waterfall

Enregistrer globalement le composant :

import waterfall from 'vue-waterfall'
Vue.use(waterfall)

Ensuite, nous pouvons utiliser la disposition du flux en cascade dans le composant :

<template>
  <waterfall>
    <div v-for="(item, index) in items" :key="index">
      <h3>{{item.title}}</h3>
      <p>{{item.desc}}</p>
      <img :src="item.imgUrl" :alt="item.title">
    </div>
  </waterfall>
</template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}
</script>

Description du code

Ce code utilise la bibliothèque axios pour obtenir des données à partir d'une source de données. La structure des données est à peu près la suivante :

[
  {
    title: 'Item 1',
    desc: 'This is item 1',
    imgUrl: 'https://example.com/item1.png',
  },
  {
    title: 'Item 2',
    desc: 'This is item 2',
    imgUrl: 'https://example.com/item2.png',
  },
  // ...
]

Optimiser les dispositions de défilement infini et de flux en cascade

En fait, dans des scénarios d'application réels, infini le défilement et le flux en cascade sont gérés Un problème courant rencontré lors de la mise en page du flux : lorsque la source de données est très volumineuse, les performances du composant chutent fortement, ce qui ralentit ou même bloque la réponse. Nous introduisons ici quelques stratégies d'optimisation pour améliorer les performances des composants.

Utiliser la technologie de défilement virtuel

L'idée de base de la technologie de défilement virtuel est de restituer uniquement les données vues par l'utilisateur en fonction de l'intervalle d'affichage, plutôt que de restituer toutes les données. De cette manière, nous pouvons réduire considérablement le coût de rendu du composant, améliorant ainsi les performances. Le composant vue-virtual-scroll-list est une bibliothèque fiable pour implémenter le défilement virtuel, qui peut être utilisée conjointement avec les bibliothèques vue-infinite-scroll ou vue-waterfall.

Installez la bibliothèque vue-virtual-scroll-list :

npm install vue-virtual-scroll-list

Lors de l'utilisation de cette bibliothèque, vous devez apporter les modifications suivantes dans le composant :

<template>
  <virtual-scroll-list :size="75" :remain="10" :items="items" :key-field="'id'">
    <div slot-scope="{item}">
      <h3>{{item.title}}</h3>
      <p>{{item.desc}}</p>
      <img :src="item.imgUrl" :alt="item.title">
    </div>
  </virtual-scroll-list>
</template>
<script>
import axios from 'axios'
import VirtualScrollList from 'vue-virtual-scroll-list'

export default {
  components: { VirtualScrollList },
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}
</script>

Parmi eux, nous remplaçons le composant vue-waterfall par le vue-virtual -composant scroll-list, pour obtenir un effet de défilement virtuel.

Chargement partiel

Une autre façon de réduire le stress du rendu des composants consiste à charger les données par parties. Cette méthode est similaire au défilement infini mentionné précédemment, mais lors du chargement des données, au lieu d'extraire toutes les données en même temps, elle charge les données segmentées à la demande. Comment implémenter le chargement segmenté ? Une solution simple consiste à charger uniquement les N premiers éléments de données à la fois, puis à charger l'élément de données suivant une fois que l'utilisateur a fait défiler vers le bas. Cette méthode convient aux situations où la quantité de données est relativement importante.

<template>
  <div class="scroll-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>
    <div v-if="busy" class="loading">
      Loading ...
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        if (this.page <= 10) {
          this.items = [...this.items, ...newItems]
          // 增加当前页数
          this.page++
        } else {
          this.busy = true
        }
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}
</script>

Dans ce code, nous avons modifié la fonction loadMore. Il n’extrairea désormais que les 10 premières pages de données. De cette façon, même s'il y a beaucoup de données, la charge sur le composant peut être réduite en chargeant progressivement.

Résumé🎜🎜Dans cet article, nous avons présenté comment utiliser Vue.js pour créer des fonctions de défilement infini et de disposition en cascade, et avons également mis en œuvre certaines mesures d'optimisation pour améliorer les performances des composants. D'une manière générale, les trois bibliothèques vue-infinite-scroll, vue-waterfall et vue-virtual-scroll-list suffisent pour compléter notre travail, mais dans le développement réel, nous devons également considérer divers scénarios et différentes structures de données pour choisir. la solution la mieux adaptée à votre projet actuel. 🎜

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!