Cara menggunakan v-on:scroll untuk mendengar acara menatal dalam Vue

Vue ialah salah satu rangka kerja bahagian hadapan yang lebih popular pada masa ini Selain pemantauan acara biasa, Vue juga menyediakan arahan untuk memantau acara menatal, iaitu v-on:scroll. Artikel ini akan memperkenalkan secara terperinci cara menggunakan v-on:scroll untuk mendengar acara tatal dalam Vue.

1. Penggunaan asas arahan v-on:scroll

Arahan v-on:scroll digunakan untuk memantau acara tatal elemen DOM adalah seperti berikut:

<div v-on:scroll="scrollHandler"></div>

di mana , scrollHandler ialah fungsi pemprosesan acara tatal tersuai.

2. Gunakan v-on:scroll untuk memantau acara tatal objek tetingkap

Jika anda ingin memantau acara tatal tetingkap penyemak imbas, anda perlu mengikat v-on :arahan tatal ke objek tetingkap , kodnya adalah seperti berikut:

<template>
  <div>
    <p>当前滚动位置：{{ scrollTop }}</p>
    <div style="height: 2000px;" v-on:scroll="windowScroll"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  methods: {
    windowScroll() {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    },
  },
};
</script>

Dalam kod di atas, kami menggunakan scrollTop pembolehubah untuk menyimpan kedudukan skrol semasa, dan kemudian mengikat arahan v-on:scroll ke elemen div dengan ketinggian tetap, supaya Ia boleh ditatal. Dalam windowScroll fungsi pengendalian acara tatal, kami memperoleh kedudukan tatal semasa melalui document.documentElement.scrollTop || document.body.scrollTop dan menetapkannya kepada pembolehubah scrollTop. Dengan cara ini, setiap kali tetingkap ditatal, kaedah windowScroll akan dicetuskan dan kedudukan tatal semasa akan dikemas kini.

3 Gunakan v-on:scroll untuk mendengar acara tatal komponen

Jika anda ingin mendengar acara tatal dalam komponen Vue, anda boleh mengikat v-on : arahan tatal ke akar elemen dan tambah fungsi pemprosesan tatal yang sepadan dalam komponen.

<template>
  <div style="height: 200px; overflow-y: scroll;" v-on:scroll="scrollHandler">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["item1", "item2", "item3", "item4", "item5"],
    };
  },
  methods: {
    scrollHandler(event) {
      console.log(event.target.scrollTop);
    },
  },
};
</script>

Dalam kod di atas, kami menggunakan elemen div dengan ketinggian tetap dan kawasan boleh tatal, dan kemudian mengikat arahan v-on:scroll ke elemen supaya ia boleh mendengar acara tatal. Dalam fungsi pemprosesan acara tatal scrollHandler, kita boleh mendapatkan kedudukan tatal semasa melalui event.target.scrollTop.

4 Gunakan fungsi nyahlantun untuk mengoptimumkan pemprosesan acara menatal

Dalam pembangunan sebenar, kami mungkin perlu melakukan beberapa operasi yang kompleks dalam fungsi pemprosesan acara menatal, seperti mengemas kini kandungan halaman dan memuatkan lebih banyak lagi. data Dsb., operasi ini memakan masa dan jika dilakukan terus setiap kali anda menatal, ia boleh menyebabkan kelewatan pada halaman. Untuk mengelakkan situasi ini, kita boleh menggunakan fungsi nyahlantun untuk mengoptimumkan fungsi pengendalian acara tatal.

Fungsi nyahlantun ialah kaedah pendikit fungsi yang biasa digunakan Ia membenarkan fungsi dilaksanakan sekali sahaja dalam tempoh masa tertentu, dengan itu mengurangkan jumlah pengiraan pada halaman. Kita boleh menggunakannya untuk mengoptimumkan acara tatal.

<template>
  <div style="height: 200px; overflow-y: scroll;" v-on:scroll="scrollHandlerWithDebounce">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { debounce } from "lodash";

export default {
  data() {
    return {
      list: ["item1", "item2", "item3", "item4", "item5"],
    };
  },
  methods: {
    scrollHandler() {
      console.log(event.target.scrollTop);
    },
    scrollHandlerWithDebounce: debounce(function (event) {
      this.scrollHandler(event);
    }, 300),
  },
};
</script>

Dalam kod di atas, kami menggunakan fungsi nyahlantun yang disediakan oleh perpustakaan lodash, membalut fungsi pengendalian acara tatal scrollHandler sebagai scrollHandlerWithDebounce, panggil scrollHandler dalam fungsi ini dan tetapkan masa anti goncang kepada 300ms untuk mendayakan acara tatal Fungsi pemprosesan dilaksanakan paling banyak sekali dalam masa 300ms.

Ringkasan

Menggunakan arahan v-on:scroll boleh memantau peristiwa penatalan elemen DOM Pada masa yang sama, menggunakan fungsi nyahlantun secara berkesan boleh mengelakkan panggilan yang berlebihan ke pemprosesan acara menatal berfungsi dan mengoptimumkan prestasi halaman. Pada masa yang sama, kami juga boleh mengikat arahan v-on:scroll ke elemen akar objek atau komponen tetingkap untuk melaksanakan pemantauan acara menatal dalam senario yang berbeza.

Atas ialah kandungan terperinci Cara menggunakan v-on:scroll untuk mendengar acara menatal dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!