Applets framework acquires the view layer interface node information View ~

Node obtain information on the screen

WXML node information

Node Information query API  may be configured to acquire attribute information of the node, style, position, etc. at the interface.

The most common method is to use this interface to query a node's current location, and scroll position of the interface.

Sample code:

const Query = wx.createSelectorQuery () 
Query. SELECT ( ' # The-ID ' ) .boundingClientRect (function (RES) { 
  res.top // # The node-ID on the boundary coordinates (relative to the display area) 
}) 
Query .selectViewport (). scrollOffset (function (RES) { 
  res.scrollTop // display the position of the vertical scroll area 
}) 
query.exec ()

 

In the above example,  #the-id a node selector, similar to CSS selectors but slightly different, see  SelectorQuery.select  's instructions.

In the custom component or components comprise a custom page is recommended  this.createSelectorQuery instead  wx.createSelectorQuery  , This ensures that the node in the correct range.

WXML node layout intersection state

Node API layout intersection state  can be used to monitor the intersection of two or more components of the state of nodes in the layout position. This group can be used to infer whether the API is often some nodes may be seen the user, it can be seen how much of the user.

The main concept of this set of API involved are as follows.

• Referring node: listens reference node, its layout area taken as a reference area. If a plurality of reference nodes, they will take a layout area  intersection as a reference area. Page display area may be used as one of the reference region.
• Target node: listens target, the default is only one node (using the  selectAll option, you can listen on multiple nodes simultaneously).
• Intersection region: region of intersection with the layout area of ​​the reference region of the target node.
• Intersecting ratio: the proportion of the intersection region of the reference region.
• Threshold: the intersection of proportion if the threshold is reached, it will trigger the listener callback function. Threshold may be a plurality.

The following sample code may be the target node (selector for  .target-class each time enters or leaves the specified page display region), a trigger callback function.

Sample code:

Page ({ 
  the onLoad: function () { 
    wx.createIntersectionObserver () relativeToViewport () the observe (.. ' .Target-class ' , (RES) => { 
      res.id // target node ID 
      res.dataset // target node dataset 
      res.intersectionRatio // intersection layout area proportion of the target node region 
      res.intersectionRect // intersection region 
      res.intersectionRect.left // intersection coordinates of the left boundary region 
      res.intersectionRect.top // intersection coordinates on a boundary region 
      res. intersectionRect.width // width of the intersecting region 
      res.intersectionRect.height // intersects the height of the region
    })
  }
})

 

The following sample code (with the selected at the target node  .target-class specified) with reference node (with selector  .relative-class specified) when the intersection region or away from, and intersecting or away from the extent of 20% and 50% of the target node layout area of the page display , trigger callback function.

Sample code:

Page ({ 
  the onLoad: function () { 
    wx.createIntersectionObserver ( the this , { 
      Thresholds: [ 0.2 , 0.5 ] 
    .}) The relativeTo ( ' .relative-class ' .) .RelativeToViewport () the observe ( ' .target-class ' , ( RES) => { 
      res.intersectionRatio // intersecting layout area proportion of the target node region 
      res.intersectionRect // intersection region 
      res.intersectionRect.left // intersection coordinates of the left boundary region 
      res.intersectionRect.top // intersecting region the boundary coordinates 
      res.intersectionRect.width //Width of a region intersecting 
      res.intersectionRect.height // intersecting area height 
    }) 
  } 
})

Note: the intersection area of ​​the page display area is not an accurate representation of user-visible region, because the region is involved in the calculation of "layout area", the layout area may be drawn by other nodes in the cut hidden (in case of overflow ancestor node style for hidden nodes) or a cover (case of fixed location node).

In the custom component or components comprise a custom page is recommended  this.createIntersectionObserver instead  wx.createIntersectionObserver  , This ensures that the node in the correct range.

 

 

 

.