bn.createIntersectionObserver

▸ createIntersectionObserver(component, options?): IntersectionObserver

description Creates and returns a IntersectionObserver Object instance. In a custom component or a page that contains it, you should use the this.createIntersectionObserver([options]) To replace.

remark support from jssdk > 4.0.0

example

Page({ onLoad() {  const observer = bn.createIntersectionObserver(this, {     thresholds: [0.1]  })this._observer.relativeTo('.container').observe('.start', res => {   console.log('createIntersectionObserver start: ', res)})

Parameters

Name	Type
`component`	`ComponentInstance`
`options?`	`Options`

Returns

IntersectionObserver

ComponentInstance#

Ƭ ComponentInstance: Object

Type declaration

Name	Type	Description
`id`	`string`	Component id

Options#

Ƭ Options: Object

Type declaration

Name	Type	Description
`thresholds`	`number`[]	An array of values containing all thresholds. @default [0]
`initialRatio`	`number`	The initial intersection ratio, which triggers a listener callback if the intersection ratio detected when called is not equal to this value and reaches a threshold. @default 0
`observeAll`	`boolean`	Whether multiple target nodes are observed simultaneously (instead of one), if set to true ，observe of targetSelector Multiple nodes will be selected (Note: Selecting too many nodes at the same time will affect rendering performance) @default false

Class: IntersectionObserver#

Name	Type	Description
_component	`ComponentInstance`
_options	`Options`
_relativeInfo	`RelativeInfo`[]
_observerId	`null` \| `number` \| `""`
disconnected	`boolean`
_rendererId	`undefined` \| `number`
callback	`ObserverCallback`
relativeTo	(`selector`, `margins?`): `IntersectionObserver`	Use the selector to specify a node as one of the reference ranges
relativeToViewport	(`margins`): `IntersectionObserver`	Specify the page display area as one of the reference areas
observe	(`targetSelector`, `callback`): `undefined` \| `IntersectionObserver`	Specify the target node and start listening for changes in the intersection state parameter
disconnect	(): `void`	Stop listening. The callback function will no longer trigger

relativeTo#

▸ relativeTo(selector, margins?): IntersectionObserver

Use the selector to specify a node as one of the reference ranges

Parameters

Name	Type
`selector`	`null` \| `string`
`margins?`	`Partial`<{ `left`: `number` ; `right`: `number` ; `top`: `number` ; `bottom`: `number` }>

Returns

IntersectionObserver

relativeToViewport#

▸ relativeToViewport(margins): IntersectionObserver

Specify the page display area as one of the reference areas

Parameters

Name	Type
`margins`	`Partial`<{ `left`: `number` ; `right`: `number` ; `top`: `number` ; `bottom`: `number` }>

Returns

IntersectionObserver

observe#

▸ observe(targetSelector, callback): undefined | IntersectionObserver

Specify the target node and start listening for changes in the intersection state parameter

Parameters

Name	Type
`targetSelector`	`string`
`callback`	`ObserverCallback`

Returns

undefined | IntersectionObserver

disconnect#

▸ disconnect(): void

Stop listening. The callback function will no longer trigger

Returns

void

Class: IntersectionObserver#

Name	Type	Description
_component	`ComponentInstance`
_options	`Options`
_relativeInfo	`RelativeInfo`[]
_observerId	`null` \| `number` \| `""`
disconnected	`boolean`
_rendererId	`undefined` \| `number`
callback	`ObserverCallback`
relativeTo	(`selector`, `margins?`): `IntersectionObserver`	Use the selector to specify a node as one of the reference ranges
relativeToViewport	(`margins`): `IntersectionObserver`	Specify the page display area as one of the reference areas
observe	(`targetSelector`, `callback`): `undefined` \| `IntersectionObserver`	Specify the target node and start listening for changes in the intersection state parameter
disconnect	(): `void`	Stop listening. The callback function will no longer trigger

relativeTo#

▸ relativeTo(selector, margins?): IntersectionObserver

Use the selector to specify a node as one of the reference ranges

Parameters

Name	Type
`selector`	`null` \| `string`
`margins?`	`Partial`<{ `left`: `number` ; `right`: `number` ; `top`: `number` ; `bottom`: `number` }>

Returns

IntersectionObserver

relativeToViewport#

▸ relativeToViewport(margins): IntersectionObserver

Specify the page display area as one of the reference areas

Parameters

Name	Type
`margins`	`Partial`<{ `left`: `number` ; `right`: `number` ; `top`: `number` ; `bottom`: `number` }>

Returns

IntersectionObserver

observe#

▸ observe(targetSelector, callback): undefined | IntersectionObserver

Specify the target node and start listening for changes in the intersection state parameter

Parameters

Name	Type
`targetSelector`	`string`
`callback`	`ObserverCallback`

Returns

undefined | IntersectionObserver

disconnect#

▸ disconnect(): void

Stop listening. The callback function will no longer trigger

Returns

void

ObserverCallback#

Ƭ ObserverCallback: (res: Response) => void

Type declaration

▸ (res): void

Parameters

Name	Type
`res`	`Response`

Returns

void

Response#

Ƭ Response: Object

Type declaration

Name	Type	Description
`boundingClientRect`	`Omit`<`DOMRectReadOnly`, `"x"` \| `"y"` \| `"toJSON"`>	Target boundary
`dataset`	`Record`<`string`, `Any`>	Node Custom Data Properties
`id`	`number` \| `string`	Node id
`intersectionRatio`	`number`	Intersecting proportion. How much of the target element is currently visible within the root's intersection ratio, as a value between 0.0 and 1.0. https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/intersectionRatio
`intersectionRect`	`Omit`<`DOMRectReadOnly`, `"x"` \| `"y"` \| `"toJSON"`>	Boundary of intersecting region
`relativeRect`	`Rect`	Boundary of reference area
`time`	`number`	Time Stamp for Intersection Detection

Any#

Ƭ Any: any

Rect#

Ƭ Rect: Object

Type declaration

Name	Type	Description
`left`	`number`	Left boundary
`right`	`number`	Right boundary
`top`	`number`	Upper boundary
`bottom`	`number`	Lower boundary