[TOC] ## 概述 ``` uni.createIntersectionObserver([this], [options]) ``` 创建并返回一个`IntersectionObserver`对象实例 **options 的可选参数为：** | 字段名 | 类型 | 说明 | | --- | --- | --- | | thresholds | Array | 一个数值数组，包含所有阈值。默认为`[0]`。 | | initialRatio | Number | 初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数。默认为`0`。 | | observeAll | Boolean | 是否同时观测多个参照节点（而非一个），如果设为`true`，`observe`的`targetSelector`将选中多个节点（注意：同时选中过多节点将影响渲染性能） | **IntersectionObserver** | 方法 | 说明 | | --- | --- | | IntersectionObserver.relativeTo(selector,\[margins\]) | 使用选择器指定一个节点，作为参照区域之一。 | | IntersectionObserver.relativeToViewport(\[margins\]) | 指定页面显示区域作为参照区域之一 | | IntersectionObserver.observe(selector,\[callback\]) | 指定目标节点并开始监听相交状态变化情况。回调函数`callback`包含一个参数`result` | | IntersectionObserver.disconnect() | 停止监听。回调函数将不再触发。 | **margins 参数：** 用来扩展（或收缩）参照节点布局区域的边界。 | 属性 | 类型 | 默认值 | 是否必填 | 说明 | | --- | --- | --- | --- | --- | | left | number | | 否 | 节点布局区域的左边界 | | right | number | | 否 | 节点布局区域的右边界 | | top | number | | 否 | 节点布局区域的上边界 | | bottom | number | | 否 | 节点布局区域的下边界 | **observe 回调函数 result 包含的字段** | 字段名 | 类型 | 说明 | | --- | --- | --- | | intersectionRatio | Number | 相交比例 | | intersectionRect | Object | 相交区域的边界，包含`left`、`right`、`top`、`bottom`四项 | | boundingClientRect | Object | 目标节点布局区域的边界，包含`left`、`right`、`top`、`bottom`四项 | | relativeRect | Object | 参照区域的边界，包含`left`、`right`、`top`、`bottom`四项 | | time | Number | 相交检测时的时间戳 | **示例** 如果目标节点`".test"`进入`".scroll"`区域以下 100px 时，就会触发回调函数 ``` uni.createIntersectionObserver(this).relativeTo('.scroll',{bottom: 100}).observe('.test', (res) => { console.log(res); }) ```