Vueでページスクロールイベントを監視するにはどのように設定すればよいですか？

1年 ago
綾乃, 一希
1 minute

Vueでページのスクロールイベントをリスニングするには、`mounted` フック関数でスクロールイベントリスナーを追加します。具体的には、以下の手順に従います。

  1. Vueコンポーネントに、handleScrollなどスクロールイベントを監視するメソッドを追加する。
  2. mount されるフック関数内で、addEventListener メソッドを使ってスクロールイベントをリッスンし、スクロールイベント処理関数 handleScroll を渡します。
  3. beforeDestroyフック関数で、removeEventListenerメソッドを使用してスクロールイベントリスナーを削除。

以下にサンプルコードを示します。

<template>
<div>
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
// 处理滚动事件
}
}
}
</script>

handleScrollメソッド内では、必要なスクロールイベント処理のロジックを記述します。

bannerAds