Vue コンポーネントでスクロール イベントの監視と処理を処理する方法

Vue コンポーネントでスクロール イベントの監視と処理を処理する方法

Vue の開発では、スクロール イベントを監視して処理する必要があるシナリオによく遭遇します。ローリングローディング、無限スクロール、その他の機能の実装など。この記事では、Vue コンポーネントでスクロール イベントの監視と処理を処理する方法を詳しく紹介し、具体的なコード例を示します。

1. スクロール イベントをリッスンする

Vue コンポーネントでスクロール イベントをリッスンするには 2 つの方法があります。1 つはイベント リスナーを追加する方法、もう 1 つはイベント リスナーを使用する方法です。サードパーティのプラグイン。

(1) イベント リスナーの追加

Vue コンポーネントのマウントされたフック関数では、addEventListener メソッドを通じてスクロール イベントをリッスンできます。以下はサンプル コードです:

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

上記のコードでは、コンポーネントのレンダリングが完了した後、ウィンドウ オブジェクトにスクロール イベント リスナーを追加し、イベント ハンドラー関数 handleScroll を現在の Vue のメソッドにバインドします。実例。

メモリ リークを避けるために、コンポーネントが破棄される前に、removeEventListener メソッドを使用してイベント リスナーを削除する必要もあります。

(2) サードパーティ プラグインの使用

Vue は、リスナーを手動で追加するだけでなく、スクロール イベントを処理するためのサードパーティ プラグインの使用もサポートしています。より一般的に使用されるプラグインには、vue-scroll、vue-infinite-scroll などがあります。

vue-infinite-scroll プラグインを例に挙げます。以下はサンプル コードです:

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

上記のコードでは、vue-infinite-scroll プラグインが導入されていますv-infinite はコンポーネントで使用されます -scroll ディレクティブはスクロール イベントをリッスンします。同時に、infinite-scroll-disabled 属性を使用してスクロール イベントのトリガーを無効にするかどうかを設定したり、infinite-scroll- distance 属性を使用してさらなる読み込みをトリガーするクリティカル値を設定したりすることもできます。

2. スクロール イベントの処理

スクロール イベントの処理における一般的な要件は、スクロールが最下部に到達したかどうかを判断し、関連する操作をトリガーすることです。以下はスクロールの読み込みを処理するサンプルコードです。

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;
  });
}

上記のコードでは、スクロール領域のscrollTop、clientHeight、scrollHeightを取得することで、スクロールが一番下に達すると、より多くの操作が行われると判断します。ロードがトリガーされます。 getData メソッドでは、非同期リクエストを開始してデータを取得し、そのデータを既存のデータ リストに追加できます。リクエストの送信中に、ローリング ロード操作が繰り返しトリガーされるのを避けるために、ビジー フラグを true に設定する必要があることに注意してください。

概要:

この記事では、Vue コンポーネントでスクロール イベントの監視と処理を処理する方法を紹介します。イベント リスナーを手動で追加するか、サードパーティのプラグインを使用することで、スクロール イベントを監視および処理できます。スクロール イベント処理の一般的な要件には、スクロールが最下部に到達したことを判断し、関連する操作をトリガーすることが含まれます。上記は単純なローリング読み込みの例であり、実際のニーズに応じて変更および拡張できます。

以上がVue コンポーネントでスクロール イベントの監視と処理を処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。