nodesRef.boundingClientRect([callback])

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

返回的节点信息中，每个节点的位置用 left、right、top、bottom、width、height 字段描述。如果提供了 callback 回调函数，在执行 selectQuery 的 exec 方法后，节点信息会在 callback 中返回。

示例代码

import Taro from '@tarojs/taro'

const query = Taro.createSelectorQuery()
query
  .select('#the-id')
  .boundingClientRect(rect => {
    rect.id      // 节点的 ID
    rect.dataset // 节点的 dataset
    rect.left    // 节点的左边界坐标
    rect.right   // 节点的右边界坐标
    rect.top     // 节点的上边界坐标
    rect.bottom  // 节点的下边界坐标
    rect.width   // 节点的宽度
    rect.height  // 节点的高度
  })
  .exec()

API支持度

API	微信小程序	H5	React Native
selectorQuery.in	✔️	✔️
selectorQuery.select	✔️	✔️
selectorQuery.selectAll	✔️	✔️
selectorQuery.selectViewport	✔️	✔️
nodesRef.boundingClientRect	✔️	✔️
nodesRef.scrollOffset	✔️	✔️
nodesRef.fields	✔️	✔️
selectorQuery.exec	✔️	✔️