v-on:scroll を使用して Vue でスクロール イベントをリッスンする方法

Vue は現在最も人気のあるフロントエンド フレームワークの 1 つであり、一般的なイベント監視に加えて、Vue はスクロール イベントを監視するための命令 (v-on:scroll) も提供します。この記事では、v-on:scroll を使用して Vue でスクロール イベントをリッスンする方法を詳しく紹介します。

1. v-on:scroll ディレクティブの基本的な使用法

v-on:scroll ディレクティブは、DOM 要素のスクロール イベントを監視するために使用されます。その基本的な使用法は次のとおりです:

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

ここで、scrollHandler はカスタム スクロール イベント処理関数です。

2. v-on:scroll を使用して、ウィンドウ オブジェクトのスクロール イベントを監視します。

ブラウザ ウィンドウのスクロール イベントを監視したい場合は、v-on:scroll をバインドする必要があります。

<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>

上記のコードでは、変数scrollTopを使用して現在のスクロール位置を保存し、v-on:scroll命令を次のようにバインドします。スクロールできるように高さが固定された div 要素。スクロール イベント処理関数 windowScroll では、document.documentElement.scrollTop || document.body.scrollTop を通じて現在のスクロール位置を取得し、scrollTop 変数に割り当てます。このようにして、ウィンドウがスクロールされるたびに、windowScroll メソッドがトリガーされ、現在のスクロール位置が更新されます。

3. v-on:scroll を使用してコンポーネントのスクロール イベントをリッスンする

Vue コンポーネントでスクロール イベントをリッスンしたい場合は、v-on:scroll をバインドできます。 :scroll ディレクティブをコンポーネントのルートに追加し、対応するスクロール処理関数をコンポーネントに追加します。

<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>

上記のコードでは、高さが固定されスクロール可能な領域を持つ div 要素を使用し、スクロール イベントをリッスンできるように v-on:scroll ディレクティブを要素にバインドします。スクロールイベント処理関数scrollHandlerでは、event.target.scrollTopを通じて現在のスクロール位置を取得できます。

4. デバウンス関数を使用してスクロール イベント処理を最適化する

実際の開発では、ページ コンテンツの更新や追加の読み込みなど、スクロール イベント処理関数で複雑な操作を実行する必要がある場合があります。データなどのこれらの操作は時間がかかり、スクロールするたびに直接実行すると、ページの表示が遅れる可能性があります。この状況を回避するには、デバウンス関数を使用してスクロール イベント処理関数を最適化します。

デバウンス関数は、一般的に使用される関数調整方法であり、関数を一定期間内に 1 回だけ実行できるようにすることで、ページ上の計算量を削減します。これを使用してスクロール イベントを最適化できます。

<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>

上記のコードでは、lodash ライブラリが提供するデバウンス関数を使用し、スクロール イベント処理関数scrollHandlerをscrollHandlerWithDebounceとしてラップし、この関数内でscrollHandlerを呼び出し、手ぶれ補正時間を300msに設定しています。スクロールイベント 処理関数は 300ms 以内に最大 1 回実行されます。

概要

v-on:scroll ディレクティブを使用すると、DOM 要素のスクロール イベントを簡単に監視でき、同時に debounce 関数を使用すると、スクロール イベント処理の過剰な呼び出しを効果的に回避できます。機能し、ページのパフォーマンスを最適化します。同時に、v-on:scroll 命令をウィンドウ オブジェクトまたはコンポーネントのルート要素にバインドして、さまざまなシナリオでスクロール イベントの監視を実装することもできます。

以上がv-on:scroll を使用して Vue でスクロール イベントをリッスンする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。