文章目录

• 获取节点信息
• • createSelectorQuery
  • selectViewport
  • boundingClientRect
  • fields

获取节点信息

createSelectorQuery

wx.createSelectorQuery()可以用于获取节点属性、样式、在界面上的位置等信息。
最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。

示例代码：

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

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

selectViewport

selectViewport() 可以用来获取 scroll-view 的尺寸、滚动位置等信息

*注意：selectViewport()没有参数的选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息onLoad: function (options) {const query=wx.createSelectorQuery();		//创建一个SelectorQuery 对象实例query.selectViewport().					//选择显示区域scrollOffset(function(res){				//查询节点（必须是scroll-view / viewport）的滚动位置res.id      // 节点的IDres.dataset // 节点的datasetres.scrollLeft // 节点的水平滚动位置res.scrollTop  // 节点的竖直滚动位置}).exec()}

boundingClientRect

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。
在执行 SelectorQuery.exec 方法后，节点信息会在 callback 中返回。

示例代码：

Page({getRect () {wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){rect.id      // 节点的IDrect.dataset // 节点的datasetrect.left    // 节点的左边界坐标rect.right   // 节点的右边界坐标rect.top     // 节点的上边界坐标rect.bottom  // 节点的下边界坐标rect.width   // 节点的宽度rect.height  // 节点的高度}).exec()},getAllRects () {wx.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){rects.forEach(function(rect){rect.id      // 节点的IDrect.dataset // 节点的datasetrect.left    // 节点的左边界坐标rect.right   // 节点的右边界坐标rect.top     // 节点的上边界坐标rect.bottom  // 节点的下边界坐标rect.width   // 节点的宽度rect.height  // 节点的高度})}).exec()}
})

fields

获取节点的相关信息。需要获取的字段在 fields 中指定。

示例代码：

Page({getFields () {wx.createSelectorQuery().select('#the-id').fields({dataset: true,size: true,scrollOffset: true,properties: ['scrollX', 'scrollY'],computedStyle: ['margin', 'backgroundColor'],context: true,}, function (res) {res.dataset    // 节点的datasetres.width      // 节点的宽度res.height     // 节点的高度res.scrollLeft // 节点的水平滚动位置res.scrollTop  // 节点的竖直滚动位置res.scrollX    // 节点 scroll-x 属性的当前值res.scrollY    // 节点 scroll-y 属性的当前值// 此处返回指定要返回的样式名res.marginres.backgroundColorres.context    // 节点对应的 Context 对象}).exec()}
})