createIntersectionObserver

节点布局交叉状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

bz.createIntersectionObserver([this], [options])

创建并返回一个 IntersectionObserver 对象实例。

支持说明

应用能力	Android	iOS	PC	预览效果
小程序	3.0.0	3.0.0	3.2.0	待补充
网页应用	X	X	X	待补充

输入

名称	数据类型	必填	默认值	描述
instance	object	是		页面或组件实例
options	object	否		创建选项
∟ thresholds	number []	否	[0]	一个数值数组，包含所有阈值
∟ initialRatio	number	否	0	初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数。
∟ observeAll	boolean []	否	false	是否同时观测多个参照节点（而非一个），如果设为 true，observe 的 targetSelector 将选中多个节点（注意：同时选中过多节点将影响渲染性能）

输出

返回值： intersectionObserver ，该对象的方法列表参见下表：

提示

点击下表中的方法名，查看对应API的支持说明、调用方法

方法	介绍
IntersectionObserver.relativeTo	使用选择器指定一个节点，作为参照区域之一。
IntersectionObserver.observe	指定目标节点并开始监听相交状态变化情况,回调函数 callback 包含一个参数 result
IntersectionObserver.relativeToViewport	指定页面显示区域作为参照区域之一
IntersectionObserver.disconnect	停止监听。回调函数将不再触发。

代码示例

observer = bz.createIntersectionObserver(this);
observer.relativeTo('.scroll-view').observe('.ball', (res) => {
    if (res.intersectionRatio > 0 && !this.appear) {
        this.appear = true;
    } else if (!res.intersectionRatio > 0 && this.appear) {
        this.appear = false;
    }
})