获取界面上的节点信息

WXML节点信息

节点信息查询 API 可以用于获取节点属性、样式、在界面上的位置等信息。

最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。

示例代码：

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

上述示例中， #the-id 是一个节点选择器，与 CSS 的选择器相近但略有区别，请参见 SelectorQuery.select 的相关说明。

在自定义组件或包含自定义组件的页面中，推荐使用 this.createSelectorQuery 来代替 wx.createSelectorQuery ，这样可以确保在正确的范围内选择节点。

WXML节点布局相交状态

节点布局相交状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

这一组API涉及的主要概念如下。

  • 参照节点：监听的参照节点，取它的布局区域作为参照区域。如果有多个参照节点，则会取它们布局区域的 交集 作为参照区域。页面显示区域也可作为参照区域之一。
  • 目标节点：监听的目标，默认只能是一个节点（使用 selectAll 选项时，可以同时监听多个节点）。
  • 相交区域：目标节点的布局区域与参照区域的相交区域。
  • 相交比例：相交区域占参照区域的比例。
  • 阈值：相交比例如果达到阈值，则会触发监听器的回调函数。阈值可以有多个。

以下示例代码可以在目标节点（用选择器 .target-class 指定）每次进入或离开页面显示区域时，触发回调函数。

示例代码：

  1. Page({
  2.   onLoad: function(){
  3.     wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
  4.       res.id // 目标节点 id
  5.       res.dataset // 目标节点 dataset
  6.       res.intersectionRatio // 相交区域占目标节点的布局区域的比例
  7.       res.intersectionRect // 相交区域
  8.       res.intersectionRect.left // 相交区域的左边界坐标
  9.       res.intersectionRect.top // 相交区域的上边界坐标
  10.       res.intersectionRect.width // 相交区域的宽度
  11.       res.intersectionRect.height // 相交区域的高度
  12.     })
  13.   }
  14. })

以下示例代码可以在目标节点（用选择器 .target-class 指定）与参照节点（用选择器 .relative-class 指定）在页面显示区域内相交或相离，且相交或相离程度达到目标节点布局区域的20%和50%时，触发回调函数。

示例代码：

  1. Page({
  2.   onLoad: function(){
  3.     wx.createIntersectionObserver(this, {
  4.       thresholds: [0.2, 0.5]
  5.     }).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {
  6.       res.intersectionRatio // 相交区域占目标节点的布局区域的比例
  7.       res.intersectionRect // 相交区域
  8.       res.intersectionRect.left // 相交区域的左边界坐标
  9.       res.intersectionRect.top // 相交区域的上边界坐标
  10.       res.intersectionRect.width // 相交区域的宽度
  11.       res.intersectionRect.height // 相交区域的高度
  12.     })
  13.   }
  14. })

注意：与页面显示区域的相交区域并不准确代表用户可见的区域，因为参与计算的区域是“布局区域”，布局区域可能会在绘制时被其他节点裁剪隐藏（如遇祖先节点中 overflow 样式为 hidden 的节点）或遮盖（如遇 fixed 定位的节点）。

在自定义组件或包含自定义组件的页面中，推荐使用 this.createIntersectionObserver 来代替 wx.createIntersectionObserver ，这样可以确保在正确的范围内选择节点。