微信小程序开发获取界面上的节点信息

在微信小程序的开发中，获取界面上的节点信息是一个非常重要的功能。通过节点信息查询 API，我们可以轻松地获取节点属性、样式、以及在界面上的位置等信息。最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。

1. 使用节点查询 API 获取节点信息

使用 wx.createSelectorQuery() 可以创建 SelectorQuery 对象，该对象有以下方法：

• select(selector): 在当前页面下选择第一个匹配选择器 selector 的节点，并返回单个 NodeInfo 对象实例。
• selectAll(selector): 在当前页面下选择多个匹配选择器 selector 的节点，并返回 NodeList 对象实例。
• selectViewport(): 以显示区域作为参照，返回 ViewportRect 对象实例。
• exec(callback): 执行所有已添加的请求并收集结果，回调函数会被传入所有请求的结果。

示例代码如下：

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

上述代码中，#the-id 是一个节点选择器，在自定义组件或包含自定义组件的页面中，推荐使用 this.createSelectorQuery() 来代替 wx.createSelectorQuery()，这样可以确保在正确的范围内选择节点。

2. 使用节点布局相交状态 API 监听节点状态

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

使用 wx.createIntersectionObserver() 可以创建 IntersectionObserver 对象，该对象有以下方法：

• relativeTo(selector): 指定参照节点，在它的布局区域内才会触发相交状态变化事件。
• relativeToViewport(): 以显示区域作为参照，可以观测到目标节点在显示区域内的相交状态变化。
• observe(selector, callback): 开始监听相交状态变化，当某个目标节点的相交状态变化时，就会执行回调函数。
• disconnect(): 停止监听相交状态变化。
• relativeToSelectorQuery(query): 用于指定选择器查询实例作为参照区域之一。

下面是一个示例代码，可以在目标节点每次进入或离开页面显示区域时，触发回调函数：

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 // 相交区域的高度
    })
  }
})

下面是另一个示例代码，可以在目标节点与参照节点在页面显示区域内相交或相离，且相交或相离程度达到目标节点布局区域的20%和50%时，触发