Bagaimana untuk melaksanakan pemuatan menatal imej atau senarai dalam Vue?

Apabila aplikasi web menjadi semakin kompleks, kita selalunya perlu memaparkan sejumlah besar gambar atau senarai pada halaman. Jika anda memuatkan semua kandungan sekali gus, ia akan mempengaruhi kelajuan pemuatan halaman dan pengalaman pengguna. Dalam kes ini, pemuatan menatal telah menjadi kaedah yang sangat popular.

Pemuatan tatal, juga dipanggil tatal tak terhingga, merujuk kepada meminta data seterusnya dalam masa nyata melalui teknologi AJAX semasa pengguna menatal halaman. Teknologi ini digunakan secara meluas dalam laman media sosial seperti Facebook, Twitter, Instagram, dan lain-lain untuk mencapai pengalaman yang cekap.

Dalam Vue.js, biasanya terdapat dua cara untuk melaksanakan pemuatan bergolek, satu ialah menulis kod sendiri dan satu lagi ialah menggunakan pemalam pihak ketiga. Seterusnya, kami akan memperkenalkan mereka satu persatu.

1. Tulis kod anda sendiri untuk melaksanakan rolling loading

Vue.js menyediakan arahan v-scroll yang sangat mudah, yang boleh digunakan untuk memantau acara menatal halaman. Kami boleh menentukan sama ada jarak scrollTop elemen div mencapai bahagian bawah apabila menatal Jika ia mencapai bahagian bawah, permintaan data seterusnya akan dicetuskan.

Berikut ialah kod contoh yang menggunakan tatal v untuk melaksanakan pemuatan tatal imej:

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

Dalam contoh ini, kami menggunakan tatal v untuk mendengar acara tatal unsur div, dan menentukan sama ada ia telah mencapai titik terendah. dalam kaedah onScroll Pada akhirnya, kaedah loadImages dicetuskan, yang mensimulasikan permintaan tak segerak untuk data dan menolak data ke dalam tatasusunan imej. Selain itu, untuk meningkatkan pengalaman pengguna, kami menambahkan pembolehubah pemuatan untuk menggesa data dimuatkan dalam masa nyata.

2. Gunakan pemalam pihak ketiga untuk melaksanakan pemuatan bergolek

Selain menulis kod sendiri untuk melaksanakan pemuatan bergolek, kami juga boleh menggunakan beberapa pemalam pihak ketiga untuk melaksanakan pemuatan bergolek. Di sini kami memperkenalkan dua pemalam yang biasa digunakan, iaitu vue-infinite-scroll dan vue-virtual-scroll-list.

1. vue-infinite-scroll plug-in

vue-infinite-scroll ialah pemalam tatal tak terhingga berdasarkan Vue.js Ia boleh membantu kami merealisasikan senarai pemuatan menatal, gambar dan senario lain. Menggunakan pemalam ini adalah sangat mudah Anda hanya perlu menambah arahan tatal v-infinite kepada komponen yang perlu melaksanakan pemuatan bergolek, dan kemudian nyatakan kaedah yang perlu mencetuskan pemuatan bergolek.

Berikut ialah contoh kod yang menggunakan pemalam vue-infinite-scroll untuk melaksanakan senarai pemuatan skrol:

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

Dalam contoh ini, kami mula-mula memasang pemalam vue-infinite-scroll melalui npm dan memperkenalkannya ke dalam komponen. Kami kemudian menggunakan mixin untuk mencampurkan ke dalam komponen semasa contoh Vue yang secara automatik mencipta acara tatal tak terhingga yang boleh dicetuskan. Akhir sekali, kami menentukan kaedah loadMore dalam arahan v-infinite-scroll, yang mensimulasikan permintaan tak segerak untuk data dan menolak data ke dalam tatasusunan item.

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

vue-virtual-scroll-list ialah pemalam tatal maya berdasarkan Vue.js, yang boleh membantu kami melaksanakan penatalan senarai berskala besar dengan cepat, menambah baik halaman prestasi dan pengalaman Pengguna. Berbeza daripada pemuatan tatal tradisional, vue-virtual-scroll-list menggunakan teknologi tatal maya untuk hanya memaparkan item data dalam kawasan yang kelihatan pada masa ini, dengan itu mengelakkan sejumlah besar pemaparan dan penyusunan semula DOM, serta meningkatkan kecekapan dan kelancaran Perbelanjaan .

Berikut ialah contoh kod yang menggunakan pemalam vue-virtual-scroll-list untuk melaksanakan senarai pemuatan skrol:

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

Dalam contoh ini, kami mula-mula memasang pemalam vue-virtual-scroll-list melalui npm dan memperkenalkannya dalam komponen. Kami kemudian menggunakan komponen f5e3e803208fb309449195ad19bba6aa dalam templat, yang menerima parameter seperti saiz, kekal, kunci data, sumber data dan komponen data.

Antaranya, parameter saiz menentukan ketinggian setiap item data, parameter kekal menentukan bilangan pra-pemarahan, kunci data menentukan medan yang digunakan untuk mengenal pasti secara unik setiap item data dan sumber data menentukan senarai data yang perlu diberikan , komponen data menentukan komponen pemaparan item data. Akhir sekali, kami melaksanakan logik permintaan data secara tak segerak dalam acara pemuatan.

Kesimpulan

Melalui pengenalan di atas, kita dapati bahawa terdapat banyak cara untuk melaksanakan pemuatan tatal imej atau senarai dalam Vue.js. Walaupun menulis kod sendiri adalah fleksibel, ia memerlukan banyak kod dan memerlukan masa dan tenaga tertentu Walaupun menggunakan pemalam pihak ketiga adalah mudah, ia memerlukan pemahaman yang mendalam tentang prinsip dan penggunaan pemalam. untuk memajukan perniagaan dengan lebih baik. Oleh itu, apabila melaksanakan rolling loading, anda perlu memilih kaedah yang sesuai dengan anda berdasarkan senario perniagaan tertentu dan kekuatan anda sendiri.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemuatan menatal imej atau senarai dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!