SelectorQuery NodesRef.boundingClientRect(function callback)

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

参数

function callback

回调函数，在执行 SelectorQuery.exec 方法后，节点信息会在 callback 中返回。

参数

Object res
属性类型说明
idstring节点的 ID
datasetObject节点的 dataset
leftnumber节点的左边界坐标
rightnumber节点的右边界坐标
topnumber节点的上边界坐标
bottomnumber节点的下边界坐标
widthnumber节点的宽度
heightnumber节点的高度

返回值

SelectorQuery

示例代码

  1. Page({
  2.   getRect () {
  3.     wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
  4.       rect.id      // 节点的ID
  5.       rect.dataset // 节点的dataset
  6.       rect.left    // 节点的左边界坐标
  7.       rect.right   // 节点的右边界坐标
  8.       rect.top     // 节点的上边界坐标
  9.       rect.bottom  // 节点的下边界坐标
  10.       rect.width   // 节点的宽度
  11.       rect.height  // 节点的高度
  12.     }).exec()
  13.   },
  14.   getAllRects () {
  15.     wx.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
  16.       rects.forEach(function(rect){
  17.         rect.id      // 节点的ID
  18.         rect.dataset // 节点的dataset
  19.         rect.left    // 节点的左边界坐标
  20.         rect.right   // 节点的右边界坐标
  21.         rect.top     // 节点的上边界坐标
  22.         rect.bottom  // 节点的下边界坐标
  23.         rect.width   // 节点的宽度
  24.         rect.height  // 节点的高度
  25.       })
  26.     }).exec()
  27.   }
  28. })