spz-observer 观察者#

#何时使用

• 需要观察滚动超出或未超出边界时。
• 需要观察在滚动下目标元素是否还可见。
• 需要观察在指定容器内滚动下目标元素是否还可见
• 需要观察当前滚动的方向。
• 需要观察是否有子元素更新。
• 需要观察目标元素是否在首屏可见。

注：以下的事件可以同时使用。

#观察滚动是否超过给定的边界

属性

事件

#scrollExceedBoundary

当滚动超出给定的边界值时该事件会自动被触发。

#scrollNotExceedBoundary

当滚动未超出给定的边界值时该事件会自动被触发（在有滚动后才会触发）。

代码演示

<spz-observer
  layout="logic"
  value="500"
  @scrollExceedBoundary="..."
  @scrollNotExceedBoundary="..."
></spz-observer>

<spz-observer
  layout="logic"
  value="window.outerHeight"
  @scrollExceedBoundary="..."
  @scrollNotExceedBoundary="..."
></spz-observer>

#观察滚动后目标元素是否可见

属性

事件

#scrollToVisible

当元素从不可见滚动到视口的可见区域时该事件会自动触发。

#scrollToInvisible

当元素从可见滚动到视口的不可见区域时该事件会自动触发。

代码演示

<spz-observer
  layout="logic"
  target="sticky-buttons"
  @scrollToVisible="..."
  @scrollToInvisible="..."
></spz-observer>

#观察指定容器滚动后目标元素是否可见

属性

事件

#visible

当元素可见时触发，初始时若可见会触发一次，后续在滚动发生时若处于可见区域每次都会触发。

#invisible

当元素不可见时触发，初始时若不可见会触发一次，后续在滚动发生时若处于不可见区域每次都会触发。

代码演示

<spz-observer
  layout="logic"
  target="sticky-buttons"
  @visible="..."
  @invisible="..."
></spz-observer>

#观察滚动方向

事件

#scrollUp

当窗口滚动从当前位置向上时该事件会自动触发。

#scrollDown

当窗口滚动从当前位置向下时该事件会自动触发。

代码演示

<spz-observer
  layout="logic"
  @scrollDown="..."
  @scrollUp="..."
></spz-observer>

#观察目标元素在首屏是否可见

属性

事件

#visibleInFirstScreen

当目标元素在首屏可见时该事件会自动触发。

#invisibleInFirstScreen

当目标元素在首屏不可见时该事件会自动触发。

代码演示

<spz-observer
  layout="logic"
  target="buyNow"
  @visibleInFirstScreen="..."
  @invisibleInFirstScreen="..."
></spz-observer>

#观察目标元素子元素是否有更新

使用 MutationObserver 观察器来观察 subtree 和 childList 属性。参考 MutationObserver。

属性

事件

#childUpdated

观察以目标元素为根节点的整个子树中节点发生的新增与删除时，会自动触发该事件。

代码演示

<spz-observer
  layout="logic"
  target="header-menu"
  @childChild="..."
></spz-observer>

#方法

#restart

重新初始化，不需要参数。（所有的事件都支持）

#AI 摘要（LLM Ready）

• 组件标识：spz-observer
• 用途一句话：观察是否符合某种特定条件，符合就自动触发对应的事件。
• 可识别属性条目：0
• 可识别方法小节：1
• 可识别事件小节：0
• 关键属性名（Top）：无（待补充）
• 关键方法名（Top）：restart
• 关键事件名（Top）：无（待补充）
• 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
• 关联文档：/guide/actions-and-events/ 、/guide/layouts/