交叉

QIntersection组件本质上是Intersection指令的封装,它的附加好处是它可以单独处理状态(不需要您手动添加状态),并且可以有显示/隐藏过渡效果。

但是,使用QIntersection的主要好处是,DOM树释放了隐藏的节点,因此使用了尽可能少的RAM内存,并使页面感觉非常活泼。

在幕后,它使用Intersection Observer API

WARNING

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

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

WARNING

在大多数情况下,要求将CSS应用于QIntersection元素,以便在不渲染内部内容时将其用作必要的填充符。 这将提供平滑的滚动体验,因为不这样的话滚动将会不规律地跳跃。

需要CSS的此类示例将是,例如,固定高度或至少最小高度(甚至可能是固定宽度,如下面的示例所示,可以在同一行上显示多个QIntersections)。

WARNING

如果使用transition属性,则要求将内容包裹在一个且仅一个元素中。

基础

Basic

带过渡效果

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

With transition
A list with transition

只有一次

但是,仅触发一次就意味着您失去了释放DOM树的好处。 无论可见性如何,内容都将保留在DOM中。

Triggering only once

QIntersection API

Loading API...
Please wait...