• nodesRef.boundingClientRect([callback])
    • 示例代码
    • API支持度

    nodesRef.boundingClientRect([callback])

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

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

    示例代码

    1. import Taro from '@tarojs/taro'
    2. const query = Taro.createSelectorQuery()
    3. query
    4. .select('#the-id')
    5. .boundingClientRect(rect => {
    6. rect.id // 节点的 ID
    7. rect.dataset // 节点的 dataset
    8. rect.left // 节点的左边界坐标
    9. rect.right // 节点的右边界坐标
    10. rect.top // 节点的上边界坐标
    11. rect.bottom // 节点的下边界坐标
    12. rect.width // 节点的宽度
    13. rect.height // 节点的高度
    14. })
    15. .exec()

    API支持度

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