QIntersection 组件本质上是对交集指令的包装,它拥有额外的优势,即它本身会处理状态(不需要您手动添加和处理),并且可以选择使用显示/隐藏过渡。
然而,使用 QIntersection 的主要好处是 DOM 树中隐藏节点被释放,从而使用最小的 RAM 内存,并使页面感觉非常流畅。此外,您可以为包装元素指定tag
属性以匹配您的需求,从而消除另一个 DOM 节点。
在后台,它使用交集观察者 API.
用法
警告
在大多数情况下,您需要对 QIntersection 元素应用 CSS,使其在内部内容未渲染时充当必要的填充。这将有助于提供流畅的滚动体验,因为否则滚动将不规则地跳跃。
例如,这种需要的 CSS 可以是固定高度或至少是最小高度(甚至可以是固定宽度,如以下示例所示,其中多个 QIntersections 可以显示在同一行)。
警告
如果使用transition
属性,则需要将内容包装在一个且只有一个元素中。
提示
在某些情况下,默认视窗将不起作用。例如,当您的代码托管在 iframe(如 Codepen)中时。在这种情况下,您需要使用root
属性。它允许您将视窗的替代项定义为您的根(通过其 DOM 元素)。重要的是要记住,根元素必须是观察元素的祖先。
基本
使用过渡
在下面的示例中,我们使用了 Quasar 过渡。有关完整列表,请访问过渡页面。
仅一次
但是,仅触发一次意味着您失去了释放 DOM 树的优势。无论可见性如何,内容都将保留在 DOM 中。
下面的示例使用了root
属性,因此可以在 Codepen(在 iframe 中托管)中查看。