节点布局相交状态
最后更新于：2022-04-02 03:39:32
[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);
})
```
';