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

npm install vue-waterfall

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

Copier après la connexion

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

[
  {
    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',
  },
  // ...
]

npm install vue-virtual-scroll-list

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

Copier après la connexion

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

Copier après la connexion

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!