QIntersection 组件本质上是 Intersection 指令 的包装器,它的额外优势在于会自动管理状态(不需要您手动添加和处理),并且还可以选择性地添加显示/隐藏过渡效果。
QIntersection 最大的好处在于,它会从 DOM 树中释放不可见的节点,从而使用最少的内存,让页面运行非常流畅。此外,您还可以通过 tag 属性指定包装元素的标签以匹配您的需求,从而减少额外的 DOM 节点。
在底层,它使用 Intersection Observer API。
WARNING
并非所有浏览器都支持 Intersection Observer API。大多数现代浏览器都支持,但其他浏览器不支持。如果您需要支持较旧的浏览器,可以安装并导入(到 boot 文件中)官方的 W3C polyfill。
用法
WARNING
在大多数情况下,您需要为 QIntersection 元素应用 CSS,以便在内部内容未渲染时充当必要的占位。这样可以保证平滑的滚动体验,否则滚动会出现不规则的跳动。
这类 CSS 可以是固定高度或至少是最小高度(可能还需要固定宽度,如下面的示例所示,其中多个 QIntersection 可以在同一行显示)。
WARNING
如果使用了 transition 属性,内容必须且只能被包裹在一个元素中。
TIP
有些边界情况下,默认视口可能无法正常工作。例如,当您的代码托管在 iframe 中(如 Codepen)。这时您需要使用 root 属性,它允许您指定一个替代视口的根元素(通过其 DOM 元素)。请注意,root 必须是被观察元素的祖先元素。
基础
过渡效果
在下面的示例中,我们使用了 Quasar 过渡效果。有关完整列表,请查看过渡效果页面。
仅触发一次
使用仅触发一次意味着您将失去释放 DOM 树的优势。无论元素是否可见,内容都将保留在 DOM 中。
下面的示例使用了 root 属性,因此可以在 Codepen(托管在 iframe 中)中正常查看。