All Products
Search
Document Center

Node query

Last Updated: Feb 04, 2021

my.createIntersectionObserver

Create and return an IntersectionObserver object instance. You need to run my.createIntersectionObserver() after page.onReady.

Version requirement: Base library V1.11.0 or later versions. For earlier versions, you are suggested to perform Compatibility processing.

Parameters

The input parameters are of Object type and have the following attributes:

Attribute Type Default value Description
thresholds Array<Number> [0] A numeric array containing all thresholds.
initialRatio Number 0 The initial intersection ratio. If the intersection ratio detected during the operation is not equal to this value and reaches the threshold, the callback function of the listener will be triggered.
selectAll Boolean false Whether to monitor multiple target nodes (rather than one) at the same time. If this parameter is set to true, the monitoring targetSelector selects multiple nodes. Note: When you select too many nodes at the same time, this will affect rendering performance.

Return value

 
  1. IntersectionObserver

Sample code

 
  1. <!-- .axml -->
  2. <view class="logo" style='width: 200px;height: 200px;background-color:blue'>11</view>
 
  1. Page({
  2. onReady() {
  3. my.createIntersectionObserver().relativeToViewport({top: 100, bottom: 100}).observe('.logo', (res) => {
  4. console.log(res, 'intersectionObserver');
  5. console.log(res.intersectionRatio); // The ratio of the intersection area to the layout area of ​the target node.
  6. console.log(res.intersectionRect); // The intersection area.
  7. console.log(res.relativeRect); // The boundaries of the reference area.
  8. console.log(res.boundingClientRect); // The target boundaries.
  9. console.log(res.time); // The timestamp.
  10. console.log(res.id);
  11. });
  12. }
  13. })

IntersectionObserver

Infers whether certain nodes can be seen by the user and how many nodes can be seen by the user.

IntersectionObserver.disconnect

Stops the monitoring. The callback function will not be triggered.

IntersectionObserver.observe

Specifies the target node and starts monitoring intersection status changes.

Parameters

The format of input parameters is: (String targetSelector, function callback)

  • String targetSelector indicates the selector.
  • Function callback indicates the callback function for monitoring intersection status changes.

Callback parameters

Object res attributes

Attribute Type Description
intersectionRatio Number The intersection ratio.
intersectionRect Object The boundaries of the intersection area.
boundingClientRect Object The target boundaries.
relativeRect Object The boundaries of the reference area.
time Number The timestamp of intersection detection.

res.intersectionRect attributes

Attribute Type Description
left Number The left boundary.
right Number The right boundary.
top Number The upper boundary.
bottom Number The lower boundary.

res.boundingClientRect attributes

Attribute Type Description
left Number The left boundary.
right Number The right boundary.
top Number The upper boundary.
bottom Number The lower boundary.

res.relativeRect attributes

Attribute Type Description
left Number The left boundary.
right Number The right boundary.
top Number The upper boundary.
bottom Number The lower boundary.

IntersectionObserver.relativeTo

Uses the selector to specify a node as a reference area.

Parameters

The format of input parameters is: (String selector,Object margins)

  • String selector indicates the selector.
  • Object margins is used to expand or shrink the boundaries of the layout area of the reference node with the following attributes:
Attribute Type Required Description
left Number No The left boundary of the node layout area.
right Number No The right boundary of the node layout area.
top Number No The upper boundary of the node layout area.
bottom Number No The lower boundary of the node layout area.

IntersectionObserver.relativeToViewport

Specifies a page display area as a reference area.

Parameters

The input parameter is “Object margins”, which is used to expand or shrink the boundaries of the layout area of the reference node with the following attributes:

Attribute Type Required Description
left Number No The left boundary of the node layout area.
right Number No The right boundary of the node layout area.
top Number No The upper boundary of the node layout area.
bottom Number No The lower boundary of the node layout area.

my.createSelectorQuery

Note:
  • This interface is supported since basic library version 1.4.0.
  • This interface is only supported in mPaaS 10.1.32 and later versions.


Obtains the node query object SelectorQuery.

Parameters

Parameter Type Description
params Object You can specify the page attribute, which defaults to the current page.

Sample code

 
  1. <!-- API-DEMO page/API/create-selector-query/create-selector-query.axml-->
  2. <view class="page">
  3. <view class="page-description">The node query API</view>
  4. <view class="page-section">
  5. <view className="all">Node all1</view>
  6. <view className="all">Node all2</view>
  7. <view id="one">Node one</view>
  8. <view id="scroll" style="height:200px;overflow: auto">
  9. <view style="height:400px">The independent scrolling area</view>
  10. </view>
  11. <button type="primary" onTap="createSelectorQuery">Node query</button>
  12. </view>
  13. </view>
 
  1. // API-DEMO page/API/create-selector-query/create-selector-query.js
  2. Page({
  3. createSelectorQuery() {
  4. my.createSelectorQuery()
  5. .select('#non-exists').boundingClientRect()
  6. .select('#one').boundingClientRect()
  7. .selectAll('.all').boundingClientRect()
  8. .select('#scroll').scrollOffset()
  9. .selectViewport().boundingClientRect()
  10. .selectViewport().scrollOffset().exec((ret) => {
  11. console.log(ret);
  12. my.alert({
  13. content: JSON.stringify(ret, null, 2),
  14. });
  15. })
  16. },
  17. });

ret structure

 
  1. [
  2. null,
  3. {
  4. "x": 1,
  5. "y": 2,
  6. "width": 1367,
  7. "height": 18,
  8. "top": 2,
  9. "right": 1368,
  10. "bottom": 20,
  11. "left": 1
  12. },
  13. [
  14. {
  15. "x": 1,
  16. "y": -34,
  17. "width": 1367,
  18. "height": 18,
  19. "top": -34,
  20. "right": 1368,
  21. "bottom": -16,
  22. "left": 1
  23. },
  24. {
  25. "x": 1,
  26. "y": -16,
  27. "width": 1367,
  28. "height": 18,
  29. "top": -16,
  30. "right": 1368,
  31. "bottom": 2,
  32. "left": 1
  33. }
  34. ],
  35. {
  36. "scrollTop": 0,
  37. "scrollLeft": 0
  38. },
  39. {
  40. "width": 1384,
  41. "height": 360
  42. },
  43. {
  44. "scrollTop": 35,
  45. "scrollLeft": 0
  46. }
  47. ]

SelectorQuery

The node query object class, which includes the following methods:

selectorQuery.select(selector)

Selects the first node that matches the selector. The selector supports the ID and class selectors.

selectorQuery.selectAll(selector)

Selects all nodes that match the selector. The selector supports the ID and class selectors.

selectorQuery.selectViewport()

Selects the window object.

selectorQuery.boundingClientRect()

Places the position information of the currently selected node into the query result. This function is similar to getBoundingClientRect of dom, and the returned objects are width, height, left, top, bottom, and right. If the current node is a window object, only width and height are returned.

selectorQuery.scrollOffset()

Places the scrolling information of the currently selected node into the query result. The returned objects are scrollTop and scrollLeft.

selectorQuery.exec(callback)

Places the query result into the callback for callback. The query result is an array, and each item in the array is the result of a query. If the item is a node list, the result of a single query is also an array. Note that you must perform the Page onReady operation before exec.