Intersection Directive

"Intersection"是使用Intersection Observer API监听当 DOM/组件在可视窗口中出现或者消失（由页面滚动导致）时触发一个函数的 Quasar 指令。

用法

建议先阅读 Intersection Observer API 的文档，这有助于您理解此指令的工作原理。

Intersection 指令接受一个函数或者一个配置对象作为参数。配置对象的格式如下：

{
  handler: /* Function */,
  cfg: {
    // "Intersection observer options" 中的任意选项
    // 详见 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
    root: null, // DOM Element
    rootMargin: '0px',
    threshold: 0
  }
}

使用配置对象时，只有 handler 是必须的。

handler 函数接受一个 IntersectionObserverEntry 类型的参数。

基础

仅触发一次

可以使用 once 修饰符（例如：v-intersection.once）。一旦被观察的元素进入视口，handler 函数就会被调用，然后停止观察。这可以减少不必要的性能开销——如果您只需要在元素首次可见时收到通知的话。如果该修饰符在后续渲染中被移除（例如在 HMR 时编辑了模板），元素会重新被观察。

使用配置对象

通过传入一个对象（而不是函数）作为指令的值，您可以控制 Intersection Observer 的所有选项（如 threshold）。使用相同选项的元素在底层共享同一个 Intersection Observer（QIntersection 组件和 useIntersection composable 也共享它），这正是让长列表滚动保持轻量的原因。

禁用

传入布尔值 false（或 undefined）（而非一个函数或对象）会禁用该指令：在再次提供处理函数之前，该元素会停止被观察。这一过程中 DOM 元素不受影响，因此它所包裹的内容会保留自身的状态。

进阶

下面是一个更高级的示例。代码利用了 HTML 的 data 属性——通过在循环中设置 data-id 为元素的索引，就可以在 handler 中通过 entry.target.dataset.id 获取它。如果您不熟悉 data 属性，可以阅读这篇文档。

在下面的示例中，我们展示了多张卡片，但只有可见的卡片会被渲染。秘诀在于外层容器——它绑定了 v-intersection 指令并设置了固定的宽高（作为内部内容未渲染时的占位，防止滚动时发生跳动）。

下面的示例也可以使用 QIntersection 组件来实现，会更加简洁。