“Intersection” 是一个 Quasar 指令，它允许在用户滚动时调用一个方法，当它应用到的 DOM 元素（或组件）进入或离开视窗时。

在后台，它使用的是 Intersection Observer API。

使用

首先阅读 Intersection Observer API 将有助于你了解此指令的工作原理。

Intersection 指令接受一个处理函数作为参数或一个对象。对象形式如下所示

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

使用对象形式时，只有 handler 键是必须的。

处理函数接受一个参数，它是一个 IntersectionObserverEntry。

基本

触发一次

该指令可以与 once 修饰符一起使用（例如：v-intersection.once）。一旦观察到的元素进入视野，处理函数将被调用，观察将停止。这使你能够控制处理开销，如果你的所有需求只是在观察到的元素开始在屏幕上可见时收到通知。

使用对象

通过将对象作为指令的值传递（而不是函数），你可以控制 Intersection Observer 的所有选项（如阈值）。

高级

下面是一个更高级的示例，说明你可以做些什么。代码利用了 HTML data 属性。基本上，通过使用循环中元素的索引设置 data-id，这可以通过传递给处理程序的 entry 作为 entry.target.dataset.id 来检索。如果你不熟悉 data 属性，你可以阅读更多 这里 关于使用它的信息。

在以下示例中，我们展示了多个卡片，但只有可见的卡片会被渲染。诀窍在于包装器，它附加了 v-intersection，并具有固定高度和宽度（当内部内容未渲染时，这充当必要的填充物，这样滚动就不会出现不稳定的跳跃）。

以下示例也可以使用 QIntersection 组件来编写，这使一切变得更加容易。