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

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

示例代码：

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 是一个节点选择器，与 CSS 的选择器相近但略有区别，请参见  的相关说明。

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

 

将选择器的选取范围更改为自定义组件 component 内。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

注：在小程序组件的ready生命周期中进行调用，即可获取节点信息。 

 

Component({  methods: {       queryMultipleNodes (){        const query = wx.createSelectorQuery().in(this)        query.select('#the-id').boundingClientRect(function(res){          res.top // 这个组件内 #the-id 节点的上边界坐标        }).exec()      }  },       lifetimes: {    attached: function () {      // 在组件实例进入页面节点树时执行    },    detached: function () {      // 在组件实例被从页面节点树移除时执行    },    ready: function(){      console.log('ready');      this.queryMultipleNodes ();// 获取节点信息    }  },  })

 

 

参考：

获取节点信息：

组件中获取节点信息：

组件生命周期：