Gets node information on the interface

WXML node information

The node information query API can be used to obtain information such as node properties, styles, location on the interface, and so on.

The most common use is to use this interface to query the current location of a node and the scrolling position of the interface.

Example code:

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

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

In custom components or pages that contain custom components, it is recommended to use this.createSelectorQuery instead of wx.createSelectorQuery, which ensures that nodes are selected within the correct range.

WXML node layout intersecting state

The Node Layout Intersect State API can be used to listen for the intersecting states of two or more component nodes at the layout location. This set of APIs can often be used to infer whether and how much of a node can be seen by the user.

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

• Reference node: The reference node that listens, taking its layout area as the reference area. I f there are multiple reference nodes, the intersection of their layout areas is taken as the reference area. The page display area can also be used as one of the reference areas.
• Target node: The target of the listening, which by default can only be one node (when using the selectAll option, you can listen to multiple nodes at the same time).
• Intersection area: The layout area of the target node is in the intersection area of the reference area.
• Intersection ratio: the proportion of the intersection area accounts for the reference area.
• Threshold: Intersection If the threshold is reached, the callback function of the listener is triggered.There are multiple thresholds.

The following sample code can trigger the callback function when you enter or leave the page display area each time you enter or leave the page display area, with a selector .target-class.

Sample code:

Page({
  onLoad: function(){
    wx.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 intersect or disclose or sit in the page display area in the page display area in the target node (specified by the selector .Target-class) and the reference node (specified by the selector. "When the area is 20% and 50%, the callback function is triggered.

Sample code:

Page({
  onLoad: function(){
    wx.createIntersectionObserver(this, {
      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 participating in the calculation is the Layout Area, which may be cropped and hidden by other nodes at draw time (such as nodes where the overflow style is hidden in the ancestor node) or obscured (such as nodes located in fixed).

In custom components or pages that contain custom components, it is recommended to use this.createIntersectionObserver instead of wx.createIntersectionObserver, which ensures that nodes are selected within the correct range.