Mobile Platform as a Service:Node query

my.createIntersectionObserver

Creates and returns an IntersectionObserver object instance. Call my.createIntersectionObserver() after page.onReady executes.

Requires: Base libraries 1.11.0 or later. For more information about earlier versions, see Compatibility handling.

Input parameters

The input parameter is an Object with the following properties:

Return value

IntersectionObserver

Sample code

<!-- .axml -->
<view class="logo" style='width: 200px;height: 200px;background-color:blue'>11</view>

Page({
  onReady() {
    my.createIntersectionObserver().relativeToViewport({top: 100, bottom: 100}).observe('.logo', (res) => {
      console.log(res, 'intersectionObserver');
        console.log(res.intersectionRatio); // The ratio of the intersection area to the layout area of the target node
        console.log(res.intersectionRect);  // Intersection area
        console.log(res.relativeRect);      // Borders of the reference area
        console.log(res.boundingClientRect); // Target borders
        console.log(res.time); // Timestamp
        console.log(res.id);
    });
  }
})

IntersectionObserver

An IntersectionObserver object. It is used to determine whether a node is visible to the user and what proportion of the node is visible.

IntersectionObserver.disconnect

Stops the listener. The callback function is no longer triggered.

IntersectionObserver.observe

Specifies a target node and starts listening for changes in the intersection status.

Input parameters

The input parameters are (String targetSelector, function callback).

• String targetSelector: The selector.

• Function callback: The callback function that listens for changes in the intersection status.

callback parameters

Object res properties

res.intersectionRect properties

res.boundingClientRect properties

res.relativeRect properties

IntersectionObserver.relativeTo

You can use a selector to designate a node as a reference area.

Input parameters

The input parameter structure is (String selector,Object margins).

• String selector: Specifies the selector.

• Object margins: Expands or shrinks the borders of the reference node's layout area. The properties are as follows:

IntersectionObserver.relativeToViewport

Specifies the page display area as a reference area.

Input parameters

The input parameter `Object margins` is used to expand or shrink the borders of the reference node's layout area. The properties are as follows:

my.createSelectorQuery

Retrieves a SelectorQuery object for node queries.

Parameter description

Code example

<!-- API-DEMO page/API/create-selector-query/create-selector-query.axml-->
<view class="page">
  <view class="page-description">Node Query API</view>
  <view class="page-section">
    <view className="all">Node all1</view>
    <view className="all">Node all2</view>
    <view id="one">Node one</view>
    <view id="scroll" style="height:200px;overflow: auto">
      <view style="height:400px">Independent scroll area</view>
    </view>
    <button type="primary" onTap="createSelectorQuery">Query Nodes</button>
  </view>
</view>

// API-DEMO page/API/create-selector-query/create-selector-query.js
Page({
  createSelectorQuery() {
    my.createSelectorQuery()
      .select('#non-exists').boundingClientRect()
      .select('#one').boundingClientRect()
      .selectAll('.all').boundingClientRect()
      .select('#scroll').scrollOffset()
      .selectViewport().boundingClientRect()
      .selectViewport().scrollOffset().exec((ret) => {
      console.log(ret);
      my.alert({
        content: JSON.stringify(ret, null, 2),
      });
    })
  },
});

ret structure

[
  null,
  {
    "x": 1,
    "y": 2,
    "width": 1367,
    "height": 18,
    "top": 2,
    "right": 1368,
    "bottom": 20,
    "left": 1
  },
  [
    {
      "x": 1,
      "y": -34,
      "width": 1367,
      "height": 18,
      "top": -34,
      "right": 1368,
      "bottom": -16,
      "left": 1
    },
    {
      "x": 1,
      "y": -16,
      "width": 1367,
      "height": 18,
      "top": -16,
      "right": 1368,
      "bottom": 2,
      "left": 1
    }
  ],
  {
    "scrollTop": 0,
    "scrollLeft": 0
  },
  {
    "width": 1384,
    "height": 360
  },
  {
    "scrollTop": 35,
    "scrollLeft": 0
  }
]

SelectorQuery

The `SelectorQuery` class represents a node query object. It includes the following methods:

selectorQuery.select(selector)

Selects the first node that matches an ID or class selector.

selectorQuery.selectAll(selector)

Selects all nodes that match an ID or class selector.

selectorQuery.selectViewport()

You can select the window object.

selectorQuery.boundingClientRect()

Adds the bounding box information for the selected node to the query result. This is similar to `dom.getBoundingClientRect`. The returned object contains `width`, `height`, `left`, `top`, `bottom`, and `right`. If the selected node is a window object, only `width` and `height` are returned.

selectorQuery.scrollOffset()

Adds the scroll information for the selected node to the query result. The returned object contains the `scrollTop` and `scrollLeft` properties.

selectorQuery.exec(callback)

The query result is passed to the `callback` function as an array. Each item in the array is the result of a single query. If the current selection is a list of nodes, the result of a single query is also an array.