# Get node information on the interface

# WXML Node Information

Node information query API Can be used to get information about node properties, style, location on the interface, and more.

The most common usage is to use this interface to query the current position of a node, as well as the scroll position of the interface.

Sample code:

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
  res.top // #the-id The upper boundary coordinates of the node (relative to the display area)
})
query.selectViewport().scrollOffset (function(res){
  res.scrollTop  // Vertical scrolling position of the display area
})
query.exec()

In the above example, #the-id Is a node selector, with the CSS Is similar but slightly different, see SelectorQuery.select The relevant explanation.

In custom components or pages containing custom components, it is recommended to use this.createSelectorQuery To replace wx.createSelectorQuery , this ensures that nodes are selected in the correct range.

# WXML node layout intersection state

Node layout intersection state API Can be used to listen for the intersection of two or more component nodes at layout locations. This set of APIs can often be used to infer whether and what percentage of nodes are visible to users.

The main concepts covered by this set of APIs are as follows.

• Reference node: The listening reference node, which takes its layout area as the reference area. If there are multiple reference nodes, they are taken from the intersection As a reference area. The page display area can also be used as one of the reference areas.
• Target Node: The target of listening, which by default can only be one node (using selectAll Option, you can listen on multiple nodes at the same time).
• Intersection Area: The area where the layout area of the target node intersects the reference area.
• Intersect Ratio: The proportion of the intersect region to the reference region.
• Threshold: The intersection ratio triggers the listener's callback function if the threshold is reached. There can be more than one threshold.

The following example code can be used on the target node with a selector .target-class Triggers a callback every time you enter or leave the display area of the page.

Sample code:

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // Target node id
      res.dataset  // Target node dataset
      res.intersectionRatio // Proportion of the intersection region to the layout region of the target node
      res.intersectionRect // Intersecting region
      res.intersectionRect.left // The left boundary coordinates of the intersecting region
      res.intersectionRect.top // Upper boundary coordinates of intersecting regions
      res.intersectionRect.width // Width of intersecting region
      res.intersectionRect.height // Height of the intersecting region
    })
  }
})

The following example code can be used on the target node with a selector .target-class Specified) with the reference node (with the selector .relative-class A callback function is triggered when the page display area intersects or diverges to a degree of 20% and 50% of the target node layout area.

Sample code:

Page({
  onLoad: function(){
    wx.createIntersectionObserver(this, {
      thresholds: [0.2, 0.5]
    }).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {
      res.intersectionRatio // Proportion of the intersection region to the layout region of the target node
      res.intersectionRect // Intersecting region
      res.intersectionRect.left // The left boundary coordinates of the intersecting region
      res.intersectionRect.top // Upper boundary coordinates of intersecting regions
      res.intersectionRect.width // Width of intersecting region
      res.intersectionRect.height // Height of the intersecting region
    })
  }
})

Note: The area that intersects with the display area of the page does not accurately represent the area visible to the user, because the area involved in the calculation is the "layout area," and the layout area may be clipped and hidden by other nodes when drawing (such as in the case of an ancestor node). overflow Style is hidden The node) or cover (in case of fixed The node to locate).

In custom components or pages containing custom components, it is recommended to use this.createIntersectionObserver To replace wx.createIntersectionObserver , this ensures that nodes are selected in the correct range.