#Exposure Ability

The exposure capability provides a capability to observe changes in the visibility of a target node. When a target node changes from invisible to visible, an exposure event is triggered. Otherwise, an anti-exposure event is triggered.

Developers can monitor the exposure/anti-exposure events of nodes by setting relevant properties for the target nodes to be observed, thereby achieving requirements such as point reporting and UI lazy loading.

The exposure capability observes changes in node visibility through timed exposure detection tasks. The visibility of a node depends on the following factors:

• Visibility of the target node: The target node itself has width and height and is opaque, and the parent node has no clipping with zero width or height.
• Viewport intersection of the target node: The target node intersects with the parent scroll container, Lynxview, and the viewport of the screen.

#Monitor exposure of the entire page

When developers need to monitor exposure/anti-exposure events of nodes in the entire page, they can subscribe to the exposure event exposure and anti-exposure event disexposure of the node with the exposure-id attribute set through GlobalEventEmitter.

In the following example, the developer uses GlobalEventEmitter to monitor whether the node in ComponentA is exposed, and outputs the exposed node exposure-id when it is exposed.

Example 1:

eventsrc/visibility_expose_global/index.tsx

Preview

The format of the exposure/anti-exposure event is an array, which contains the target node information of each triggering exposure/anti-exposure event.

[
  {
    "exposure-id": string,        // exposure-id set on the target node
    "exposure-scene": string,     // exposure-scene set on the target node
    "sign": string,               // uid of the target node
    "dataset": object,            // "data-" field set on the target node
    //......
  },
  //......
]

#Monitor the exposure of a certain node

When the developer only needs to listen to the exposure/anti-exposure events of a certain node, you can set the [event handler](../event-handling/event-listening.mdx#Event handler properties) to listen to the node's uiappear and uidisappear events.

In the following example, the developer sets the [event handler](../event-handling/event-listening.mdx#Event handler properties) to listen to whether the node is exposed, and outputs the exposed node id when it is exposed.

Example 2:

eventsrc/visibility_expose_custom/index.tsx

Preview

The event parameter e.detail contains the node information.

{
  "type": string                    // event name
  "detail":
    {
      "exposure-id": string,        // exposure-id set on the target node
      "exposure-scene": string,     // exposure-scene set on the target node
      "unique-id": string,          // uid of the target node
      "dataset": object,            // "data-" field set on the target node
      //......
    },
  //......
}

#Control exposure detection

Lynx also provides some properties and methods to control the execution of exposure detection tasks.

For example, developers can use the following methods to control whether the exposure detection task is started, stopped, and the execution frequency.

• lynx.stopExposure: used to stop exposure detection, that is, no longer detect the visibility of the target node, and no exposure/anti-exposure events will be triggered later.
• lynx.resumeExposure: used to start exposure detection, that is, restart the visibility detection of the target node, and then trigger the exposure/anti-exposure events normally.
• lynx.setObserverFrameRate: used to set the frequency of exposure detection.

In addition, developers can also control the exposure detection logic of the node by setting exposure-related properties on the node, such as exposure-screen-margin-*, exposure-ui-margin-*, exposure-area, etc.