“Intersection” 是 Quasar 指令，當使用者滾動且所套用的 DOM 元素（或元件）進入或離開視窗時，能夠呼叫一個方法。

在底層，它使用 Intersection Observer API。

用法

先閱讀 Intersection Observer API 將有助於您理解此指令的運作方式。

Intersection 指令接受處理函式或物件作為參數。物件形式如下所示

{
  handler: /* Function */,
  cfg: {
    // any options from "Intersection observer options"
    // on https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
    root: null, // DOM Element
    rootMargin: '0px',
    threshold: 0
  }
}

當使用物件形式時，只有 handler 鍵是必要的。

處理函式接受一個參數，即 IntersectionObserverEntry。

基本

觸發一次

此指令可以與 once 修飾符一起使用 (例如：v-intersection.once)。 一旦觀察的元素進入視窗，將會呼叫處理函式並停止觀察。 如果您只需要在觀察的元素開始在螢幕上可見時收到通知，這可讓您控制處理開銷。

使用物件

透過傳遞物件作為指令的值 (而不是函式)，您可以控制 Intersection Observer 的所有選項 (例如 threshold)。

進階

以下是更進階的範例，展示您可以做什麼。 此程式碼利用了 HTML data 屬性。 基本上，透過在迴圈中將元素的索引設定為 data-id，可以透過傳遞到處理函式的 entry 作為 entry.target.dataset.id 檢索它。 如果您不熟悉 data 屬性，可以在此處閱讀更多關於如何使用它的資訊。

在以下範例中，我們顯示多個卡片，但僅渲染可見的卡片。 秘密在於附加了 v-intersection 的包裝器以及固定的高度和寬度 (當內部內容未渲染時，它充當必要的填充物 – 以免滾動不穩定地跳動)。

下面的範例也可以使用 QIntersection 元件編寫，這使一切變得更加容易。