Cara melaksanakan tatal wayarles secara asli dalam vue.js

Vue.js ialah rangka kerja bahagian hadapan JavaScript yang popular yang menyediakan pembangun dengan pelbagai alatan dan ciri, menjadikannya lebih mudah untuk membangunkan aplikasi satu halaman. Salah satu keperluan biasa ialah melaksanakan tatal tak terhingga pada halaman, iaitu, apabila pengguna menatal ke bahagian bawah halaman, lebih banyak kandungan dimuatkan secara automatik, yang sangat praktikal dalam banyak aplikasi web.

Artikel ini akan memperkenalkan kaedah melaksanakan tatal tak terhingga secara asli dalam Vue.js. Mula-mula kita akan meneroka beberapa konsep dan asas, kemudian memberikan contoh pelaksanaan.

Pengenalan

Tatal tak terhingga (juga dikenali sebagai "drop-down tak terhingga") merujuk kepada pemuatan berterusan data baharu dan menambahkannya pada penghujung kandungan sedia ada semasa pengguna menatal halaman. Ini membolehkan pengguna menyemak imbas sejumlah besar kandungan dengan lancar tanpa memerlukan sebarang tindakan tambahan.

Dalam Vue.js, melaksanakan penatalan tak terhingga biasanya melibatkan aspek berikut:

• Mendengar acara tatal tetingkap
• Menentukan masa untuk menatal ke bahagian bawah halaman
• Panggil API untuk mendapatkan lebih banyak data
• Kemas kini keadaan komponen untuk mencerminkan data baharu

Langkah pelaksanaan

Kami akan menggunakan komponen dan arahan Vue .js untuk mencapai penatalan tanpa had. Berikut ialah langkah pelaksanaan kami:

1. Buat komponen Vue

Kami mula-mula mencipta komponen Vue, yang sepatutnya mengandungi semua data dan keadaan yang diperlukan untuk menatal tanpa had.

Vue.component('infinite-scroll', {
  data() {
    return {
      items: [],    // 存储所有数据的数组
      nextPage: 1,  // 要加载的下一页索引
      loading: false // 是否在加载数据
    };
  },
  methods: {
    // 加载更多数据
    loadMore() {
      if (this.loading) return;  // 如果已经在加载数据，则返回
      this.loading = true;       // 设置为正在加载数据
      fetchData(this.nextPage)   // 调用API获取数据
        .then((newItems) => {
          this.items = this.items.concat(newItems); // 将新加载的数据添加到数组中
          this.nextPage++;  // 增加要加载的下一页索引
          this.loading = false;  // 设置为未在加载数据
        });
    }
  },
  mounted() {
    this.loadMore();  // 初始化时加载第一页数据
    window.addEventListener('scroll', this.handleScroll); // 添加滚动事件监听器
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll); // 在组件销毁前移除滚动事件监听器
  }
});

Dalam kod di atas, kami mula-mula mentakrifkan komponen Vue bernama infinite-scroll, yang mengandungi semua data dan keadaan yang diperlukan untuk menatal tanpa had. Kemudian kami mentakrifkan kaedah yang dipanggil loadMore yang digunakan untuk memuatkan lebih banyak data.

Apabila komponen dimulakan, kami akan memanggil kaedah loadMore untuk memuatkan halaman pertama data pada halaman. Kami kemudian akan mendengar acara scroll dan apabila pengguna menatal ke bahagian bawah halaman, panggil kaedah loadMore untuk memuatkan lebih banyak data.

2. Tambahkan pendengar acara tatal

Untuk mengesan apabila menatal ke bahagian bawah halaman, kita perlu menambah pendengar acara tatal dalam mounted komponen pendengar kaedah kitaran hayat. Ini boleh dicapai melalui kaedah window.addEventListener.

Kita boleh menggunakan kaedah yang dipanggil handleScroll untuk mengendalikan acara tatal. Dalam kaedah ini, kita boleh mendapatkan ketinggian dan kedudukan tatal halaman untuk menentukan sama ada ia sedang ditatal ke bahagian bawah halaman:

mounted() {
  this.loadMore();  // 初始化时加载第一页数据
  window.addEventListener('scroll', this.handleScroll); // 添加滚动事件监听器
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll); // 在组件销毁前移除滚动事件监听器
},
methods: {
  // 处理滚动事件
  handleScroll() {
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (windowHeight + scrollTop >= documentHeight - 100) {
      this.loadMore();
    }
  }
}

Dalam kod di atas, kita mula-mula mendapat ketinggian halaman tetingkap, ketinggian dokumen dan kedudukan tatal. Kemudian kami menentukan sama ada kami telah menatal ke bahagian bawah halaman, dan jika ya, panggil kaedah loadMore untuk memuatkan lebih banyak data.

Perhatikan bahawa apabila kita mengira ketinggian halaman, kita menolak nilai tetap (100 dalam kes ini) untuk mengelakkan ralat di bahagian bawah halaman.

3. Dapatkan lebih banyak data

Setelah kami menentukan bahawa kami perlu memuatkan lebih banyak data, kami boleh menghubungi API untuk mendapatkan data baharu. Dalam contoh ini, kami menganggap terdapat API tak segerakfetchData yang mengembalikan objek Promise yang mengandungi tatasusunan data baharu.

methods: {
  // 加载更多数据
  loadMore() {
    if (this.loading) return;  // 如果已经在加载数据，则返回
    this.loading = true;       // 设置为正在加载数据
    fetchData(this.nextPage)   // 调用API获取数据
      .then((newItems) => {
        this.items = this.items.concat(newItems); // 将新加载的数据添加到数组中
        this.nextPage++;  // 增加要加载的下一页索引
        this.loading = false;  // 设置为未在加载数据
      });
  }
}

Dalam kod di atas, kami mula-mula menentukan sama ada data sedang dimuatkan, dan jika ya, kembalikan. Kami kemudian menetapkan status kepada Memuat data dan menggunakan kaedah fetchData untuk mendapatkan data baharu. Selepas data dikembalikan, kami menggunakan kaedah concat untuk menambah data baharu pada tatasusunan sedia ada dan meningkatkan indeks halaman seterusnya untuk dimuatkan sebanyak 1. Akhir sekali, kami menetapkan status kepada Tidak memuatkan data.

Ini melengkapkan keseluruhan proses pelaksanaan tatal tak terhingga.

Contoh

Di bawah ialah contoh tatal tak terhingga yang lengkap. Dalam contoh mudah ini, kami menggunakan API palsu yang dipanggil fakeData yang mengembalikan beberapa data palsu sebagai contoh.

<!-- 在模板中使用 infinite-scroll 命令 -->
<div v-infinite-scroll="loadMore" class="list">
  <!-- 循环渲染 items 数组中的数据 -->
  <div v-for="item in items" :key="item.id" class="item">{{ item.text }}</div>
  <!-- 显示加载状态 -->
  <div v-if="loading" class="loading">Loading...</div>
</div>

// fetchData 模拟异步获取数据
function fetchData(page) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const results = [];
      for (let i = 0; i < 50; i++) {
        results.push({
          id: (page - 1) * 50 + i,
          text: `Item ${(page - 1) * 50 + i}`
        });
      }
      resolve(results);
    }, 1000);
  });
}

const app = new Vue({
  el: &#39;#app&#39;,
  data() {
    return {
      items: [],
      nextPage: 1,
      loading: false
    };
  },
  methods: {
    loadMore() {
      if (this.loading) return;
      this.loading = true;
      fetchData(this.nextPage)
        .then((newItems) => {
          this.items = this.items.concat(newItems);
          this.nextPage++;
          this.loading = false;
        });
    }
  },
});

Dalam kod di atas, kami menggunakan arahan v-infinite-scroll untuk mengikat acara tatal dan menggunakan gelung dalam templat untuk memaparkan data dalam tatasusunan items. Kami juga menambah keadaan pemuatan yang mudah supaya pengguna mengetahui data baharu sedang dimuatkan.

Kesimpulan

Pelaksanaan asli tatal tak terhingga Vue.js membolehkan kami melaksanakan tatal tak terhingga dengan mudah dalam aplikasi kami, sekali gus memberikan pengalaman antara muka yang lancar kepada pengguna. Dalam artikel ini, kami memperkenalkan kaedah melaksanakan penatalan tak terhingga secara asli berdasarkan Vue.js dan memberikan contoh untuk rujukan.

Apabila melaksanakan penatalan tanpa had, anda perlu memberi perhatian kepada beberapa isu, seperti cara mengoptimumkan prestasi, cara mengendalikan kemungkinan ralat, dsb. Kita harus mempertimbangkan dengan teliti isu-isu ini dalam aplikasi praktikal dan memilih penyelesaian terbaik.

Atas ialah kandungan terperinci Cara melaksanakan tatal wayarles secara asli dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!