spz-observer 观察者

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

布局

logic

何时使用

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

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

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

属性

属性名	说明	类型	默认值	是否必需
value	边界值，支持从全局对象中获取值，例如：`window.innerHeight`	number \| window对象属性	-	是
media	符合媒体查询条件时进行观察，可用来区分pc/mobile，例如: `media="(min-width: 960px)"`	string	-	否

事件

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	-	是
selector	目标元素的css选择器，当`target`不存在时必需，只选中符合的第一个元素	string	-	否
threshold	元素可见/不可见部份的阈值，超过这个比例时才会触发事件, 取值范围`0-1`	number	-	否
direction	指定滚动方向的前提下观察，`up`表示向上滑动	“up” \| “down”	-	否
media	符合媒体查询条件时进行观察，可用来区分pc/mobile，例如: `media="(min-width: 960px)"`	string	-	否

事件

scrollToVisible

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

scrollToInvisible

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

代码演示

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

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

属性

属性名	说明	类型	默认值	是否必需
target	观察的目标元素的ID	string	-	是
selector	目标元素的css选择器，当`target`不存在时必需，只选中符合的第一个元素	string	-	否
root-container	指定滚动的容器元素ID	string	`window`	否

事件

visible

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

invisible

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

代码演示

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

观察滚动方向

事件

scrollUp

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

scrollDown

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

代码演示

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

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

属性

属性名	说明	类型	默认值	是否必需
target	观察的目标元素的ID	string	-	是
selector	目标元素的css选择器，当`target`不存在时必需，只选中符合的第一个元素	string	-	否
media	符合媒体查询条件时进行观察，可用来区分pc/mobile，例如: `media="(min-width: 960px)"`	string	-	否

事件

visibleInFirstScreen

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

invisibleInFirstScreen

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

代码演示

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

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

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

属性

属性名	说明	类型	默认值	是否必需
target	观察的目标元素的ID	string	-	是
selector	目标元素的css选择器，当`target`不存在时必需，只选中符合的第一个元素	string	-	否
media	符合媒体查询条件时进行观察，可用来区分pc/mobile，例如: `media="(min-width: 960px)"`	string	-	否

事件

childUpdated

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

代码演示

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

方法

restart

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