Asas pembangunan VUE3: Buat senarai tatal tanpa had menggunakan pemalam Vue.js

Vue.js ialah rangka kerja JavaScript popular yang boleh membina aplikasi web interaktif dengan cepat. Versi Vue.js 3 terbaharu menawarkan banyak ciri baharu dan pengoptimuman prestasi, salah satunya adalah permintaan yang sangat biasa adalah untuk mencipta senarai tatal yang tidak terhingga. Artikel ini akan memperkenalkan cara menggunakan pemalam Vue.js untuk membuat senarai tatal yang tidak terhingga.

Apakah senarai tatal tak terhingga?

Senarai tatal tak terhingga ialah corak reka bentuk biasa dalam aplikasi web yang boleh memuatkan sejumlah besar data secara dinamik (cth., artikel, senarai produk, dll.) dan memuatkan lebih banyak data secara automatik apabila pengguna menatal ke bawah. Corak reka bentuk ini sangat berkesan dalam meningkatkan pengalaman pengguna dan mengurangkan masa muat halaman.

Pemalam Vue.js

Vue.js menggunakan pemalam untuk melanjutkan fungsinya. Pemalam boleh menambah beberapa fungsi global pada aplikasi Vue.js dan mudah digunakan dalam projek Vue.js. Pemalam Vue.js biasanya ditambahkan pada aplikasi melalui kaedah Vue.use().

Pemalam senarai tatal tak terhingga

Dalam Vue.js, terdapat beberapa pemalam senarai tatal tak terhingga tersedia. Salah satunya ialah v-infinite-scroll. v-infinite-scroll ialah pemalam vue.js berasaskan arahan yang ringan yang boleh memuatkan kandungan secara dinamik melalui acara DOM ('scroll').

Gunakan pemalam tatal v-infinite-scroll untuk melaksanakan senarai tatal tak terhingga

Berikut ialah langkah-langkah untuk melaksanakan senarai tatal tak terhingga mudah menggunakan pemalam tatal v-infinite-scroll:

Langkah Pertama: Pasang pemalam v-infinite-scroll

Gunakan npm atau yarn untuk memasang pemalam v-infinite-scroll:

npm install vue-infinite-scroll

atau

yarn add vue-infinite-scroll

Langkah 2: Import pemalam v-infinite-scroll

Import pemalam v-infinite-scroll dalam komponen Vue:

import infiniteScroll from ‘vue-infinite-scroll’
export default {
  directives: { 
    infiniteScroll
  }
}

Langkah 3: Dalam HTML Tambah arahan v-infinite-scroll

Tambah arahan v-infinite-scroll pada elemen yang memerlukan penatalan infinite:

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</div>

Sebagai anda boleh lihat, apabila menatal ke 10 elemen dari bawah, Cetuskan kaedah loadMore. Walau bagaimanapun, kerana kami tidak mahu pengguna membuat sebarang permintaan lain semasa data sedang dimuatkan, kami perlu menambah bendera sibuk untuk melumpuhkan arahan sehingga data dimuatkan.

Langkah 4: Laksanakan kaedah loadMore dalam komponen Vue

Tentukan dan laksanakan kaedah loadMore dalam komponen Vue, yang digunakan untuk memuatkan lebih banyak data dan menambahkannya ke senarai:

export default {
  data() {
    return {
      list: [
        'Item 1',
        'Item 2',
        'Item 3'
      ],
      busy: false
    }
  },
  methods: {
    async loadMore() {
      if (this.busy) return
      this.busy = true
      // 模拟从服务器获得新数据的延迟
      await new Promise(resolve => setTimeout(resolve, 2000))
      this.list.push('Item ' + (this.list.length + 1))
      this.busy = false
    }
  },
  directives: { 
    infiniteScroll
  }
}

Dalam contoh ini, kaedah loadMore menggunakan tak segerak/menunggu untuk memuatkan data baharu secara tak segerak. Setelah memuatkan data selesai, tambahkan data baharu pada senarai sedia ada dan tetapkan bendera sibuk kepada palsu untuk mendayakan semula arahan.

Ringkasan

Menggunakan pemalam Vue.js boleh menjadikan aplikasi Vue.js lebih berskala dan fleksibel. Gunakan pemalam tatal v-infinite-scroll untuk melaksanakan senarai tatal tak terhingga dengan mudah, mengoptimumkan pengalaman pengguna dan mengurangkan masa muat halaman. Melalui langkah di atas, anda boleh melaksanakan senarai tatal tak terhingga asas dalam Vue.js 3 dan menambahnya mengikut keperluan anda sendiri.

Atas ialah kandungan terperinci Asas pembangunan VUE3: Buat senarai tatal tanpa had menggunakan pemalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!