交叉指令
v1.3+

“Intersection”是Quasar指令,当用户滚动并且将其应用到的DOM元素(或组件)进入或退出视区时,可以调用一个方法。

在底层,它使用Intersection Observer API

WARNING

并非所有浏览器都支持Intersection Observer API。 大多数现代浏览器都可以,但是其他浏览器,如IE 11,却没有。 如果需要支持较旧的浏览器,则可以安装和导入(到启动文件中)官方的W3C polyfill

Intersection API

用法

首先,请阅读Intersection Observer API,这对于您理解此指令的工作方式是最好的。

Intersection指令将handler函数或对象作为参数。 对象形式如下所示:

{
  handler: /* 函数 */,
  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.

TIP

在以下示例中滚动,直至观察到元素为止。 然后将其滚动到视图之外。

基础




触发一次

该指令可与once修饰符一起使用(例如:v-intersection.once)。 一旦侦听的元素出现,handler函数将被调用,侦听将停止。 这使您可以控制处理开销, 如果在侦听的元素开始在屏幕上可见时您需要的只是被通知。




使用对象

通过传入对象作为指令的值(而不是函数),您可以控制“Intersection Observer”的所有选项(例如阈值)。




高级

下面是您可以做什么的更高级的示例。 该代码利用了HTML的data属性。 基本上,在循环中设置data-id为元素的索引,索引值可以通过将传递给处理程序的entryentry.target.dataset.id来获取。 如果您不熟悉data属性,可以在此处 阅读更多有关使用data属性的信息。




在下面的示例中,我们显示了多张卡片,但是只有可见的卡片被渲染。 秘诀在于包裹容器上有v-intersection并有固定的高度和宽度(当内部内容未渲染时,它充当了必要的填充物,因此滚动不会不规律地跳动)。

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




TIP

在上面的示例中,我们使用了Quasar过渡。 有关完整列表,请转到过渡页面。