Vue使用Intersection?Observer檢測元素是否展示

更新時間：2024年11月22日 09:03:16 作者：樂聞x

Intersection?Observer?是一個瀏覽器原生的?API,用于異步觀察目標(biāo)元素與其祖先元素或頂部視口之間的交叉狀態(tài)變化,本文就來聊聊如何使用Intersection?Observer檢測元素是否展示吧

前言

在現(xiàn)代前端開發(fā)中，了解頁面元素的可見性是至關(guān)重要的。例如，我們可能希望在用戶滾動到特定部分時加載更多內(nèi)容，或者在元素進(jìn)入視口時觸發(fā)動畫效果。盡管 Vue.js 并沒有直接提供監(jiān)聽元素可見性的 API，但我們可以巧妙地利用 JavaScript 的 Intersection Observer API 與 Vue 的自定義指令相結(jié)合，來實(shí)現(xiàn)這一功能。
本文將詳細(xì)介紹如何通過這種方法在 Vue 項(xiàng)目中監(jiān)聽元素的可見性，并探討一些高級用法和優(yōu)化技巧。

什么是 Intersection Observer

Intersection Observer 是一個瀏覽器原生的 API，用于異步觀察目標(biāo)元素與其祖先元素或頂部視口之間的交叉狀態(tài)變化。簡單來說，它可以告訴你一個元素何時進(jìn)入或離開視口。

實(shí)現(xiàn)步驟

創(chuàng)建自定義指令
使用 Intersection Observer
在 Vue 組件中使用自定義指令

1. 創(chuàng)建自定義指令

首先，我們需要創(chuàng)建一個 Vue 自定義指令，用于綁定到我們想要監(jiān)聽的元素上。這個指令會使用 Intersection Observer 來檢測元素的可見性。

// src/directives/v-visible.js

export default {
  inserted(el, binding) {
    const options = {
      root: null, // 使用視口作為根
      threshold: 0.1 // 當(dāng)至少 10% 的元素在視口中時觸發(fā)回調(diào)
    };

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value(true); // 元素可見時，調(diào)用傳入的回調(diào)函數(shù)
        } else {
          binding.value(false); // 元素不可見時，調(diào)用傳入的回調(diào)函數(shù)
        }
      });
    }, options);

    observer.observe(el);
  }
};

2. 注冊自定義指令

接下來，我們需要在 Vue 應(yīng)用中注冊這個自定義指令。

// src/main.js

import Vue from 'vue';
import App from './App.vue';
import vVisible from './directives/v-visible';

Vue.directive('visible', vVisible);

new Vue({
  render: h => h(App),
}).$mount('#app');

3. 在 Vue 組件中使用自定義指令

現(xiàn)在我們可以在任意 Vue 組件中使用這個自定義指令來監(jiān)聽元素的可見性。我們將通過一個簡單的例子來展示如何使用。

<template>
  <div>
    <div v-visible="handleVisibilityChange" class="box">
      觀察我是否在視口中
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleVisibilityChange(isVisible) {
      if (isVisible) {
        console.log('元素可見！');
      } else {
        console.log('元素不可見！');
      }
    }
  }
};
</script>

<style>
.box {
  margin-top: 100vh; /* 確保元素初始不可見 */
  height: 100px;
  background-color: lightblue;
}
</style>

進(jìn)階用法

1. 配置自定義指令的可選參數(shù)

在實(shí)際應(yīng)用中，我們可能需要自定義觀察器的行為，例如設(shè)置不同的閾值或根元素。我們可以通過指令的綁定值傳遞這些參數(shù)。

修改后的自定義指令如下：

// src/directives/v-visible.js

export default {
  inserted(el, binding) {
    const defaultOptions = {
      root: null,
      threshold: 0.1
    };

    const options = Object.assign(defaultOptions, binding.value.options || {});
    
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value.callback(true);
        } else {
          binding.value.callback(false);
        }
      });
    }, options);

    observer.observe(el);
  }
};

在組件中使用時，我們可以傳遞更多的參數(shù)：

<template>
  <div>
    <div 
      v-visible="{ 
        callback: handleVisibilityChange, 
        options: { threshold: 0.5 } 
      }" 
      class="box">
      觀察我是否在視口中
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleVisibilityChange(isVisible) {
      if (isVisible) {
        console.log('元素可見！');
      } else {
        console.log('元素不可見！');
      }
    }
  }
};
</script>

2. 解綁監(jiān)聽器

為了避免內(nèi)存泄漏，我們應(yīng)該在元素被卸載時取消監(jiān)聽。Vue 提供了 unbind 鉤子，我們可以在這個鉤子中停止觀察。

完善的自定義指令如下：

// src/directives/v-visible.js

export default {
  inserted(el, binding) {
    const defaultOptions = {
      root: null,
      threshold: 0.1
    };

    const options = Object.assign(defaultOptions, binding.value.options || {});
    
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value.callback(true);
        } else {
          binding.value.callback(false);
        }
      });
    }, options);

    observer.observe(el);
    el._observer = observer; // 將 observer 實(shí)例存儲在元素上
  },
  unbind(el) {
    if (el._observer) {
      el._observer.disconnect(); // 取消監(jiān)聽
      delete el._observer;
    }
  }
};

3. 支持重復(fù)使用

有時我們希望同一個回調(diào)函數(shù)可以被多個元素共享，而不每次都創(chuàng)建新的函數(shù)。我們可以進(jìn)一步優(yōu)化指令的定義。

<template>
  <div>
    <div 
      v-visible="visibilityHandler" 
      class="box">
      觀察我是否在視口中
    </div>
    <div 
      v-visible="visibilityHandler" 
      class="box">
      我也是
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    visibilityHandler(isVisible, el) {
      if (isVisible) {
        console.log(`${el} 元素可見！`);
      } else {
        console.log(`${el} 元素不可見！`);
      }
    }
  }
};
</script>

修改指令以支持回調(diào)傳遞元素本身：

// src/directives/v-visible.js

export default {
  inserted(el, binding) {
    const defaultOptions = {
      root: null,
      threshold: 0.1
    };

    const options = Object.assign(defaultOptions, binding.value.options || {});
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value.callback(true, el);
        } else {
          binding.value.callback(false, el);
        }
      });
    }, options);

    observer.observe(el);
    el._observer = observer;
  },
  unbind(el) {
    if (el._observer) {
      el._observer.disconnect();
      delete el._observer;
    }
  }
};

4. 處理復(fù)雜場景

對于更復(fù)雜的場景，例如需要在某些特殊情況下暫停和恢復(fù)觀察，我們可以進(jìn)一步增強(qiáng)我們的指令。例如，可以通過一個 pause 參數(shù)動態(tài)控制觀察器的工作。

// src/directives/v-visible.js

export default {
  inserted(el, binding) {
    const defaultOptions = {
      root: null,
      threshold: 0.1
    };

    const options = Object.assign(defaultOptions, binding.value.options || {});
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value.callback(true, el);
        } else {
          binding.value.callback(false, el);
        }
      });
    }, options);

    el._observer = observer;

    if (!binding.value.pause) {
      observer.observe(el);
    }
  },
  update(el, binding) {
    if (binding.value.pause && el._observer) {
      el._observer.unobserve(el);
    } else if (!binding.value.pause && el._observer) {
      el._observer.observe(el);
    }
  },
  unbind(el) {
    if (el._observer) {
      el._observer.disconnect();
      delete el._observer;
    }
  }
};

在組件中動態(tài)控制觀察器：

<template>
  <div>
    <div v-visible="{ callback: handleVisibilityChange, pause: isPaused }" class="box">
      觀察我是否在視口中
    </div>
    <button @click="isPaused = !isPaused">
      {{ isPaused ? '恢復(fù)觀察' : '暫停觀察' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPaused: false
    };
  },
  methods: {
    handleVisibilityChange(isVisible, el) {
      if (isVisible) {
        console.log('元素可見！');
      } else {
        console.log('元素不可見！');
      }
    }
  }
};
</script>