“交叉布局” 是一个 Quasar 指令，当用户滚动并且应用该指令的 DOM 元素（或组件）进入或离开视口时，它会调用一个方法。

¥“Intersection” is a Quasar directive that enables a method to be called when the user scrolls and the DOM element (or component) that it is applied to comes into or out of the viewport.

在底层，它使用 交叉点监视器 API。

¥Under the hood, it uses the Intersection Observer API.

用法(Usage)

¥Usage

首先阅读 交叉点监视器 API 将最有助于你理解此指令的工作原理。

¥Reading the Intersection Observer API first will be best in your understanding of how this directive works.

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

¥Intersection directive takes either a handler function as an argument or an Object. The Object form looks like this:

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

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

¥When using the Object form, only the handler key is mandatory.

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

¥The handler Function takes one parameter, which is an IntersectionObserverEntry.

基本(Basic)

¥Basic

触发一次(Trigger once)

¥Trigger once

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

¥The directive can be used with the once modifier (ex: v-intersection.once). Once the observed element comes into view, the handler Function will be called and the observing will stop. This allows you to control the processing overhead if all you need is to be notified when the observed element starts to be visible on screen.

使用对象(Using an Object)

¥Using an Object

通过传入一个对象作为指令的值（而不是函数），你可以控制交叉点监视器的所有选项（例如阈值）。

¥By passing in an Object as the directive’s value (instead of a Function), you can control all the options (like threshold) of the Intersection Observer.

高级功能(Advanced)

¥Advanced

以下是一个更高级的示例，展示了你可以做什么。代码利用了 HTML data 属性。基本上，通过在循环中将元素的索引设置为 data-id，可以通过将 entry 传递给处理程序作为 entry.target.dataset.id 进行检索。如果你不熟悉 data 属性，可以阅读更多关于如何使用它的 此处 内容。

¥Below is a more advanced example of what you can do. The code takes advantage of the HTML data attribute. Basically, by setting data-id with the index of the element in a loop, this can be retrieved via the passed in entry to the handler as entry.target.dataset.id. If you are unfamiliar with the data attribute you can read more here about using it.

在下面的示例中，我们显示了多张卡片，但只有可见的卡片会被渲染。秘密在于附加了 v-intersection 的封装器，它具有固定的高度和宽度（当内部内容未渲染时，它充当必要的填充物 - 这样滚动就不会出现不规则的跳跃）。

¥In the example below, we show multiple cards, but only the visible ones get rendered. The secret is in the wrapper which has v-intersection attached to it and a fixed height and width (which acts as a necessary filler when the inner content is not rendered – so that scrolling won’t erratically jump).

下面的示例也可以使用 QIntersection 组件编写，这使得一切变得更加简单。

¥The example below can also be written by using QIntersection component which makes everything even easier.