Comment implémenter le chargement par défilement d'images ou de listes dans Vue ?

À mesure que les applications web deviennent de plus en plus complexes, nous avons souvent besoin d'afficher un grand nombre d'images ou de listes sur la page. Si vous chargez tout le contenu en même temps, cela affectera grandement la vitesse de chargement des pages et l'expérience utilisateur. Dans ce cas, le chargement par roulement est devenu une méthode très populaire.

Le chargement roulant, également appelé défilement infini, fait référence au processus de demande de données ultérieures en temps réel via la technologie AJAX lorsque l'utilisateur fait défiler la page. Cette technologie est largement utilisée sur les sites de médias sociaux comme Facebook, Twitter, Instagram, etc. pour offrir une expérience efficace.

Dans Vue.js, il existe généralement deux façons d'implémenter le chargement progressif L'une consiste à écrire du code vous-même et l'autre consiste à utiliser un plug-in tiers. Ensuite, nous les présenterons un par un.

1. Écrivez votre propre code pour implémenter le chargement progressif

Vue.js fournit une instruction v-scroll très pratique, qui peut être utilisée pour surveiller les événements de défilement de la page . Nous pouvons déterminer si la distance scrollTop de l'élément div atteint le bas lors du défilement. Si elle atteint le bas, des demandes de données ultérieures seront déclenchées.

Ce qui suit est un exemple de code qui utilise v-scroll pour implémenter le chargement par défilement des images :

<template>
  <div class="image-list" v-scroll="onScroll">
    <div class="image" v-for="image in images" :key="image.id">
      <img :src="image.src" />
    </div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      loading: false,
      page: 1,
      pageSize: 10
    }
  },

  mounted() {
    this.loadImages()
  },

  methods: {
    loadImages() {
      this.loading = true
      // 模拟请求数据，每次请求 10 条数据
      setTimeout(() => {
        let start = (this.page - 1) * this.pageSize
        let end = start + this.pageSize
        for (let i = start; i < end; i++) {
          this.images.push({
            id: i,
            src: `http://www.example.com/images/${i}.jpg`
          })
        }
        this.loading = false
        this.page++
      }, 1000)
    },

    onScroll(e) {
      // 获取 div 元素的 scrollTop 和 clientHeight
      let scrollTop = e.target.scrollTop
      let clientHeight = e.target.clientHeight
      let scrollHeight = e.target.scrollHeight
      // 比较 scrollTop + clientHeight 和 scrollHeight
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadImages()
      }
    }
  }
}
</script>

Dans cet exemple, nous utilisons v-scroll pour écouter l'événement de défilement de l'élément div. Et déterminez s'il a atteint son niveau le plus bas dans la méthode onScroll. S'il atteint le niveau le plus bas, la méthode loadImages sera déclenchée. Cette méthode simulera une demande de données asynchrone et poussera les données dans le tableau images. De plus, afin d'améliorer l'expérience utilisateur, nous avons ajouté une variable de chargement pour indiquer que les données sont chargées en temps réel.

2. Utilisez des plug-ins tiers pour implémenter le chargement progressif

En plus d'écrire notre propre code pour implémenter le chargement progressif, nous pouvons également utiliser des plug-ins tiers -ins pour implémenter le chargement progressif. Nous présentons ici deux plug-ins couramment utilisés, à savoir vue-infinite-scroll et vue-virtual-scroll-list.

1. vue-infinite-scroll plug-in

vue-infinite-scroll est un plug-in de défilement infini basé sur Vue.js, ce qui peut nous aider à réaliser le chargement par défilement de listes, d’images et d’autres scénarios. L'utilisation de ce plug-in est très simple. Il vous suffit d'ajouter la directive v-infinite-scroll au composant qui doit implémenter le chargement progressif, puis de spécifier la méthode qui doit déclencher le chargement progressif.

Ce qui suit est un exemple de code qui utilise le plug-in vue-infinite-scroll pour implémenter une liste de chargement défilante :

<template>
  <div class="list" v-infinite-scroll="loadMore">
    <div class="item" v-for="(item, index) in items" :key="index">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import InfiniteScroll from 'vue-infinite-scroll'

export default {
  mixins: [InfiniteScroll],

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore() {
      // 模拟异步请求数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.items.push({ text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

Dans cet exemple, nous avons d'abord installé vue- infinite- through npm scroll plugin et introduisez-le dans le composant. Nous utilisons ensuite des mixins pour mélanger dans le composant actuel une instance de Vue qui crée automatiquement un événement à défilement infini qui peut être déclenché. Enfin, nous spécifions la méthode loadMore dans la directive v-infinite-scroll, qui simule une demande asynchrone de données et pousse les données dans le tableau items.

2. vue-virtual-scroll-list plug-in

vue-virtual-scroll-list est un parchemin virtuel basé sur Vue.js Les plug-ins peuvent nous aider à mettre en œuvre rapidement le défilement de listes avec de grandes quantités de données, améliorant ainsi les performances des pages et l'expérience utilisateur. Différent du chargement par défilement traditionnel, vue-virtual-scroll-list utilise la technologie de défilement virtuel pour restituer uniquement les éléments de données dans la zone actuellement visible, évitant ainsi un grand nombre de rendus et de réarrangements DOM et améliorant l'efficacité et la fluidité de la page. .

Ce qui suit est un exemple de code qui utilise le plug-in vue-virtual-scroll-list pour implémenter une liste de chargement défilante :

<template>
  <virtual-list
    :size="50"
    :remain="10"
    :data-key="'id'"
    :data-sources="items"
    :data-component="$options.components.item"
    @load="loadMore"
  >
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'
import Item from './Item.vue'

export default {
  components: { Item },

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore(start, end) {
      // 模拟异步请求数据
      setTimeout(() => {
        let count = end - start
        for (let i = 0; i < count; i++) {
          this.items.push({ id: this.items.length + 1, text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

Dans cet exemple, nous avons d'abord installé vue- via le plugin npm virtual-scroll-list et introduisez-le dans le composant. Nous utilisons ensuite le composant dans le modèle, qui accepte des paramètres tels que la taille, le reste, la clé de données, les sources de données et le composant de données.

Parmi eux, le paramètre size spécifie la hauteur de chaque élément de données, le paramètre rest spécifie le nombre de pré-rendu, data-key spécifie le champ utilisé pour identifier de manière unique chaque élément de données, et data- sources spécifie une liste de données qui doivent être restituées, data-component spécifie le composant de rendu de l'élément de données. Enfin, nous exécutons la logique de demande de données de manière asynchrone dans l'événement de chargement.

Conclusion

Grâce à l'introduction ci-dessus, nous pouvons constater qu'il existe de nombreuses façons d'implémenter le chargement par défilement d'images ou de listes dans Vue.js. Bien qu'écrire du code soi-même soit flexible, cela nécessite beaucoup de code et nécessite une certaine quantité de temps et d'énergie. Bien que l'utilisation de plug-ins tiers soit simple, elle nécessite une compréhension approfondie des principes et de l'utilisation des plug-ins. afin de mieux développer les affaires. Par conséquent, lors de la mise en œuvre du chargement roulant, vous devez choisir une méthode qui vous convient en fonction du scénario commercial spécifique et de vos propres forces.

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!