uniapp 如何获取节点信息

在uniapp中，如何获取特定DOM节点的信息？比如我想获取一个view组件的高度、宽度或位置等属性，应该使用什么方法？官方文档提到uni.createSelectorQuery()，但不太清楚具体如何使用，能否给个示例代码？另外，这个方法在H5和小程序端都能正常使用吗？

2 回复

使用 uni.createSelectorQuery() 创建节点查询对象，调用 select() 或 selectAll() 选择节点，再通过 boundingClientRect() 获取位置尺寸信息，最后执行 exec() 返回结果。


在 UniApp 中，可以通过 uni.createSelectorQuery() 方法获取节点信息。以下是具体步骤和示例代码：

基本步骤：

  1. 创建节点查询对象。
  2. 选择目标节点（支持 CSS 选择器）。
  3. 执行查询并获取结果。

示例代码：

// 在 Vue 方法中调用
getNodeInfo() {
  const query = uni.createSelectorQuery().in(this); // 在 Vue 组件中使用需加 .in(this)
  query.select('#myElement').boundingClientRect(data => {
    console.log("节点信息:", data); // 包含位置、尺寸等数据
  }).exec();
}

常用方法：

  • select()：选择单个节点。
  • selectAll()：选择多个节点。
  • boundingClientRect()：获取位置和尺寸。
  • scrollOffset()：获取滚动位置。
  • fields()：自定义获取字段。

注意事项：

  • 在自定义组件中使用需加 .in(this)。
  • 查询操作是异步的，需调用 exec() 执行。
  • H5 端部分 CSS 选择器可能不支持复杂表达式。

如果需要获取多个节点信息，可使用 selectAll() 并遍历结果。

回到顶部