[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); }) ```