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 | ✔️ | ✔️ |