Cara mengendalikan pemantauan dan pemprosesan acara tatal dalam komponen Vue

Cara mengendalikan pemantauan dan pemprosesan acara tatal dalam komponen Vue

Dalam pembangunan Vue, kami sering menghadapi keperluan untuk memantau dan proses menatal Senario acara, seperti melaksanakan pemuatan bergolek, menatal tak terhingga dan fungsi lain. Artikel ini akan memperkenalkan secara terperinci cara mengendalikan pemantauan dan pemprosesan acara tatal dalam komponen Vue, dan memberikan contoh kod khusus.

1. Dengar acara tatal

Terdapat dua cara untuk mendengar acara tatal dalam komponen Vue: satu ialah dengan menambahkan pendengar acara dan yang satu lagi ialah Adakah menggunakan pemalam pihak ketiga.

(1) Tambah pendengar acara

Dalam fungsi cangkuk yang dipasang bagi komponen Vue, anda boleh mendengar acara menatal melalui kaedah addEventListener. Berikut ialah kod sampel:

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    // 处理滚动事件的代码
  }
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
}

Dalam kod di atas, selepas pemaparan komponen selesai, tambahkan pendengar untuk acara tatal pada objek tetingkap, dan ikat pemegang fungsi pengendali acaraTatal ke kaedah daripada contoh Vue semasa.

Anda juga perlu mengalih keluar pendengar acara melalui kaedah removeEventListener sebelum komponen dimusnahkan untuk mengelakkan kebocoran memori.

(2) Gunakan pemalam pihak ketiga

Selain menambah pendengar secara manual, Vue juga menyokong penggunaan pemalam pihak ketiga untuk mengendalikan acara tatal. Pemalam yang lebih biasa digunakan termasuk vue-scroll, vue-infinite-scroll, dsb.

Mengambil pemalam vue-infinite-scroll sebagai contoh, berikut ialah kod sampel:

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <!-- 内容区域 -->
  </div>
</template>

<script>
import InfiniteScroll from 'vue-infinite-scroll';

export default {
  data() {
    return {
      busy: false
    }
  },
  methods: {
    loadMore() {
      if (!this.busy) {
        // 处理滚动事件的代码
      }
    }
  },
  directives: { InfiniteScroll }
}
</script>

Dalam kod di atas, palam vue-infinite-scroll -in diperkenalkan dan dalam komponen Gunakan arahan v-infinite-scroll untuk mendengar acara tatal. Pada masa yang sama, anda juga boleh menggunakan atribut infinite-scroll-disabled untuk menetapkan sama ada untuk melumpuhkan pencetus peristiwa tatal dan atribut infinite-scroll-jarak untuk menetapkan nilai kritikal yang mencetuskan lebih banyak pemuatan.

2. Mengendalikan acara skrol

Dalam pemprosesan acara skrol, keperluan biasa adalah untuk menentukan sama ada skrol telah sampai ke bahagian bawah dan berkaitan pencetus operasi. Berikut ialah contoh kod untuk mengendalikan pemuatan skrol:

loadMore() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

  if (scrollTop + clientHeight + 10 >= scrollHeight && !this.busy) {
    // 处理滚动加载操作
    this.getData();
  }
},
getData() {
  this.busy = true;

  // 发送请求获取数据
  axios.get('http://example.com/api/data').then(response => {
    // 处理获取的数据
    this.dataList.push(response.data);

    this.busy = false;
  }).catch(error => {
    console.error(error);
    this.busy = false;
  });
}

Dalam kod di atas, dengan mendapatkan skrolTop, clientHeight dan scrollHeight kawasan skrol, ia dinilai apabila skrol mencapai bahagian bawah dan mencetuskan pemuatan lebih banyak operasi. Dalam kaedah getData, anda boleh memulakan permintaan tak segerak untuk mendapatkan data dan menambahkan data pada senarai data sedia ada. Perlu diingat bahawa semasa menghantar permintaan, bendera sibuk perlu ditetapkan kepada benar untuk mengelakkan mencetuskan operasi pemuatan bergolek berulang kali.

Ringkasan:

Artikel ini memperkenalkan cara mengendalikan pemantauan dan pemprosesan acara skrol dalam komponen Vue. Dengan menambahkan pendengar acara secara manual atau menggunakan pemalam pihak ketiga, anda boleh memantau dan memproses acara tatal. Dalam pemprosesan acara tatal, keperluan biasa termasuk menentukan bahawa tatal telah sampai ke bahagian bawah dan mencetuskan operasi yang berkaitan. Di atas ialah contoh pemuatan bergolek yang mudah, yang boleh anda ubah suai dan kembangkan mengikut keperluan sebenar.

Atas ialah kandungan terperinci Cara mengendalikan pemantauan dan pemprosesan acara tatal dalam komponen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!