Intersection Directive

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

Intersection API

用法

请先阅读 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)，则 hanler 函数只会被触发一次。如果您所需要的只是在观察到的元素开始出现在屏幕上时得到通知，那么您可以使用这种方式以控制开销。

使用对象格式

使用一个对象来作为指令的值，您可以更精确的控制监听的行为。

进阶

下面是一些更高阶的用法，代码中使用了 HTML 的 data 属性，将元素的索引绑定到data-id上，然后通过 handler 函数的entry参数中的entry.target.dataset.id访问到设置的 id。如果您还不熟悉 HTML 的 data 属性，请参考：here。

下面的示例中，我们有非常多的卡片，但是只有处于可视窗口中的卡片才会被渲染。

下面的示例也可以使用 QIntersection 组件以一种更简单的方式和实现。

视频讲解

若仍有疑惑，请观看视频讲解