spz-observer 观察者

观察是否符合某种特定条件，符合就自动触发对应的事件。

布局

logic

何时使用

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

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

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

属性

属性名	说明	类型	默认值	是否必需
value	边界值，支持从全局对象中获取值，例如：`window.innerHeight`	number \| window对象属性	-	是

事件

scrollExceedBoundary

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

scrollNotExceedBoundary

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

代码演示

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

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

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

属性

属性名	说明	类型	默认值	是否必需
target	观察的目标元素的ID	string	-	是

事件

scrollToVisible

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

scrollToInvisible

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

代码演示

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

观察滚动方向

事件

scrollUp

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

scrollDown

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

代码演示

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

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

属性

属性名	说明	类型	默认值	是否必需
target	观察的目标元素的ID	string	-	是

事件

visibleInFirstScreen

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

invisibleInFirstScreen

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

代码演示

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

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

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

属性

属性名	说明	类型	默认值	是否必需
target	观察的目标元素的ID	string	-	是

事件

childUpdated

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

代码演示

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

方法

restart

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