# Get node information on the interface

# WXML Node Information

The Node Message Query API (createSelectorQuery) can be used to get information about node properties, styles, location on the interface, etc.

The most common use is to use this interface to query the current location of a node, as well as the scrolling location of the interface.

Example code:

const query = this.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
  res.top // #the-id 节点的上边界坐标（相对于显示区域）
})
query.selectViewport().scrollOffset(function(res){
  res.scrollTop // 显示区域的竖直滚动位置
})
query.exec()

In the above example,#the-idis a node selector that is similar to but slightly different from CSS selectors, see the related instructions for SelectorQuery.select .

In custom components or pages containing custom components, it is recommended to usethis.createSelectorQueryinstead of wx.createSelectorQuery , which ensures that nodes are selected in the correct range.

# WXML node layout intersection state

The Node Layout Intersection State API (createIntersectionObserver) can be used to listen for the intersection state 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: A reference node that listens and takes its layout area as a reference area.If there are multiple reference nodes, the intersection of their layout area is taken as the reference area.The page display area can also be used as one of the reference areas.
Target Node: The target for listening, by default, can only be one node (you can listen to multiple nodes at the same time with theselectAlloption).
Intersectional zone: The intersectional zone between the layout area of the target node and the reference area.
Intersectional ratio: proportion of intersectional regions to reference regions.
Threshold: If the intersecting ratio reaches a threshold, it triggers the listener's callback function. The threshold can be more than one.

The following example code triggers a callback function every time the target node (specified with the selector.target-class) enters or leaves the page display area.

Example code:

Page({
  onLoad: function(){
    this.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // 目标节点 id
      res.dataset // 目标节点 dataset
      res.intersectionRatio // 相交区域占目标节点的布局区域的比例
      res.intersectionRect // 相交区域
      res.intersectionRect.left // 相交区域的左边界坐标
      res.intersectionRect.top // 相交区域的上边界坐标
      res.intersectionRect.width // 相交区域的宽度
      res.intersectionRect.height // 相交区域的高度
    })
  }
})

The following example code can be used in the target node (with a selector.target-classThe callback function is triggered when the specified) and reference nodes (specified with the selector.relative-class) intersect or are separated within the page display area to the extent that the intersect or separated is 20% and 50% of the target node layout area.

Example code:

Page({
  onLoad: function(){
    this.createIntersectionObserver({
      thresholds: [0.2, 0.5]
    }).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {
      res.intersectionRatio // 相交区域占目标节点的布局区域的比例
      res.intersectionRect // 相交区域
      res.intersectionRect.left // 相交区域的左边界坐标
      res.intersectionRect.top // 相交区域的上边界坐标
      res.intersectionRect.width // 相交区域的宽度
      res.intersectionRect.height // 相交区域的高度
    })
  }
})

Note: The intersecting area with the page display area does not accurately represent the area visible to the user, because the area involved in the calculation is the "layout area," The layout area may be hidden by other nodes cropping while drawing (in the case of nodes in the overflow-style hidden) or covered (in the case of nodes in the fixed position).

In custom components or pages containing custom components, it is recommended to usethis.createIntersectionObserverinstead of wx.createIntersectionObserver , which ensures that nodes are selected in the correct range.