tt.createIntersectionObserver

基础库 1.10.4 开始支持本方法,低版本需做兼容处理

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

输入

Object this

自定义组件或者页面实例

Object options

参数名称数据类型属性默认值描述
thresholdsArrayoptional[0]一个数值数组,包含所有阈值
initialRatioNumberoptional0初始的相交比例,如果调用时检测到的相交比例与这个值不相等且达到阈值,则会触发一次监听器的回调函数
observeAllBooleanoptionalfalse是否同时观测多个目标节点(而非一个),如果设为 true ,observe 的 targetSelector 将选中多个节点(注意:同时选中过多节点将影响渲染性能)

输出

IntersectionObserver对象

IntersectionObserver 对象

IntersectionObserver 对象的方法列表

方法名返回值描述
relativeToIntersectionObserver 实例本身使用选择器指定一个节点,作为参照区域之一
relativeToViewportIntersectionObserver 实例本身指定页面显示区域作为参照区域之一
observe指定目标节点并开始监听相交状态变化情况
disconnect停止监听,回调函数将不再触发

IntersectionObserver.relativeTo(selector, margins)

使用选择器指定一个节点,作为参照区域之一

参数说明

String selector

选择器

Object margins

用来扩展(或收缩)参照节点布局区域的边界

参数名称数据类型属性默认值描述
leftNumberoptional0节点布局区域的左边界
rightNumberoptional0节点布局区域的右边界
topNumberoptional0节点布局区域的上边界
bottomNumberoptional0节点布局区域的下边界

IntersectionObserver.relativeToViewport(margins)

指定页面显示区域作为参照区域之一

参数说明

Object margins

用来扩展(或收缩)参照节点布局区域的边界

参数名称数据类型属性默认值描述
leftNumberoptional0节点布局区域的左边界
rightNumberoptional0节点布局区域的右边界
topNumberoptional0节点布局区域的上边界
bottomNumberoptional0节点布局区域的下边界

IntersectionObserver.observe(targetSelector, callback)

指定目标节点并开始监听相交状态变化情况

参数说明

String targetSelector

选择器

Function callback

监听相交状态变化的回调函数

callback 返回对象的属性

属性名称数据类型描述
intersectionRatioNumber相交比例
intersectionRectObject相交区域的边界
boundingClientRectObject目标边界
relativeRectObject参照区域的边界
timeNumber相交检测时的时间戳

intersectionRect、boundingClientRect、relativeRect 结构说明

属性名称类型描述
leftNumber左边界
rightNumber右边界
topNumber上边界
bottomNumber下边界
//也可以使用 this.createIntersectionObserver({observeAll}) 来创建
tt.createIntersectionObserver(this, {
  observeAll: true
})
  .relativeTo(".container")
  .observe(".ball", res => {
    res.intersectionRect; // 相交区域
    res.intersectionRect.left; // 相交区域的左边界坐标
    res.intersectionRect.top; // 相交区域的上边界坐标
    res.intersectionRect.width; // 相交区域的宽度
    res.intersectionRect.height; // 相交区域的高度
  });

IntersectionObserver.disconnect()

停止监听。回调函数将不再触发

点击纠错