Panduan Lengkap untuk Melaksanakan Pemuatan Tatal Infinite dengan Vue.js

Memandangkan jumlah data terus meningkat, pemuatan menatal halaman web secara beransur-ansur menjadi bahagian penting dalam pengalaman pengguna. Dalam artikel ini, kami akan membincangkan panduan lengkap tentang cara melaksanakan pemuatan tatal tak terhingga menggunakan Vue.js.

Apakah pemuatan tatal tak terhingga?

Pemuatan tatal tak terhingga, juga dikenali sebagai tatal tak terhingga, ialah teknik reka bentuk web yang digunakan untuk menambah lebih banyak kandungan semasa pengguna menatal halaman ke bawah. Teknologi ini biasanya digunakan pada blog, media sosial, kedai dalam talian dan laman web lain yang perlu memaparkan kandungan secara dinamik.

Tatal tak terhingga tidak sama dengan penomboran. Dalam paging tradisional, pengguna mesti membuka halaman untuk memuatkan kandungan halaman seterusnya. Dalam penatalan tanpa had, halaman akan memuatkan kandungan halaman seterusnya secara automatik dan pengguna boleh terus menyemak imbas senarai tanpa membelok halaman.

Apakah itu Vue.js?

Vue.js ialah rangka kerja JavaScript yang ringan untuk membina antara muka pengguna. Ia mempunyai kebolehskalaan dan kebolehselenggaraan yang baik, dan mudah untuk disepadukan ke dalam projek sedia ada. Vue.js menyediakan banyak ciri berguna, seperti pengikatan data dua hala, seni bina komponen dan DOM maya, menjadikan pembangunan aplikasi web lebih pantas dan lebih mudah.

Sekarang, mari kita mula meneroka cara menggunakan Vue.js untuk melaksanakan pemuatan skrol tanpa had.

Langkah 1: Sediakan projek

Mula-mula, kita perlu menyediakan projek Vue.js melalui Node.js dan npm. Kemudian, cipta komponen Vue.js untuk memaparkan item senarai kami.

Pasang Vue.js dan sediakan projek:

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install

Buat komponen:

Anda boleh menggunakan arahan berikut untuk mencipta komponen:

vue generate component List

Langkah 2 : Pelaksanaan Tatal Infinite

Inilah bahagian yang paling penting: cara untuk mencapai tatal infinite.

Andaikan kita mempunyai API yang memerlukan penomboran, dan ia mengembalikan satu halaman data dan alamat URL halaman seterusnya.

Untuk mencapai penatalan tanpa had, kami perlu memuatkan halaman seterusnya data sehingga tiada lagi data tersedia atau pengguna berhenti menatal halaman. Kami boleh menggunakan API watch Vue.js untuk mendengar acara tatal dan mencetuskan acara untuk memuatkan halaman seterusnya apabila menatal ke bahagian bawah halaman.

Dalam komponen yang kami buat sebelum ini, tambahkan kod berikut:

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      nextUrl: "https://api.example.com/page1"
    };
  },
  watch: {
    $route(to, from) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    async loadMore() {
      const response = await fetch(this.nextUrl);
      const data = await response.json();
      this.items = [...this.items, ...data.items];
      this.nextUrl = data.nextUrl;
    },
    handleScroll() {
      if (
        window.innerHeight + window.pageYOffset >=
        document.body.offsetHeight
      ) {
        this.loadMore();
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

Kami mula-mula menentukan dua item data: items dan nextUrl, items digunakan untuk menyimpan apa yang telah item senarai dimuatkan, nextUrl digunakan untuk menyimpan alamat URL halaman seterusnya.

Dalam mounted cangkuk kitaran hayat, kami mengikat kaedah handleScroll pada acara tatal.

Kami menggunakan API watch untuk mendengar peristiwa perubahan laluan, di sini untuk mengikat semula acara tatal apabila komponen digunakan semula. Kaedah

loadMore digunakan untuk memuatkan data untuk halaman seterusnya. Kami menggunakan API fetch untuk mendapatkan data dan menambahkannya pada tatasusunan items. Kaedah handleScroll digunakan untuk menyemak acara tatal Apabila halaman menatal ke bawah, kaedah loadMore dipanggil untuk memuatkan data halaman seterusnya.

Akhir sekali, kami melepaskan pemantauan acara skrol apabila komponen dimusnahkan.

Kini, kami telah menyelesaikan pelaksanaan tatal tak terhingga. Setiap kali pengguna menatal ke bahagian bawah halaman, data untuk halaman seterusnya dimuatkan secara automatik.

Langkah 3: Tambahkan gesaan pemuatan dan gesaan ralat

Pengalaman pengguna yang lebih baik biasanya memerlukan penambahan gesaan pemuatan pada penghujung senarai, dan juga perlu memaparkan gesaan ralat apabila ralat berlaku.

Tambah kod berikut dalam komponen sebelumnya:

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-if="isLoading">Loading...</div>
    <div v-if="errorMessage">{{ errorMessage }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      nextUrl: "https://api.example.com/page1",
      isLoading: false,
      errorMessage: null
    };
  },
  watch: {
    $route(to, from) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    async loadMore() {
      try {
        this.isLoading = true;
        const response = await fetch(this.nextUrl);
        const data = await response.json();
        this.items = [...this.items, ...data.items];
        this.nextUrl = data.nextUrl;
      } catch (error) {
        this.errorMessage = "Something went wrong." + error.message;
      } finally {
        this.isLoading = false;
      }
    },
    handleScroll() {
      if (
        window.innerHeight + window.pageYOffset >=
        document.body.offsetHeight
      ) {
        this.loadMore();
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

Kami menambah dua item data isLoading dan errorMessage untuk memaparkan gesaan pemuatan dan gesaan ralat masing-masing. Dalam kaedah loadMore, kami menambah blok cuba-tangkap untuk menangkap ralat yang mungkin berlaku apabila data dimuatkan dan menutup gesaan pemuatan dalam blok akhirnya. Paparkan maklumat ralat dalam errorMessage.

Kini kami mempunyai senarai tatal tak terhingga yang lengkap dengan gesaan pemuatan dan gesaan ralat.

Kesimpulan

Dalam artikel ini, kami mempelajari cara menggunakan Vue.js untuk melaksanakan senarai pemuatan tatal tanpa had. Kami belajar tentang teknologi penting seperti memantau acara tatal, pemuatan data dinamik, pemuatan paparan dan gesaan ralat.

Apabila melaksanakan penatalan tanpa had, kita perlu berhati-hati untuk tidak memuatkan terlalu banyak data sekaligus, yang akan menyebabkan kemerosotan prestasi. Kami juga harus menyediakan pengguna dengan gesaan pemuatan yang sesuai dan gesaan ralat untuk meningkatkan pengalaman pengguna.

Sudah tentu, ini hanyalah contoh mudah. Vue.js menyediakan lebih banyak fungsi dan API, membolehkan kami mencipta komponen dan aplikasi yang lebih kompleks. Semoga artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Panduan Lengkap untuk Melaksanakan Pemuatan Tatal Infinite dengan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!