uni-app获取元素宽高 uni-app如何获取dom节点信息-uni-app-PHP中文网

uni-app中必须用uni.createSelectorQuery()异步获取元素宽高，因跨端无真实DOM；需在mounted或onReady后调用，select()后必须exec()并等回调，选择器不支持空格，真机调试优先用boundingClientRect()。

uni-app里用`uni.createSelectorQuery()`获取元素宽高

uni-app不支持直接用document.getelementbyid()或ref + $el拿dom尺寸，因为跨端（尤其是小程序）没有真实dom。必须走uni.createselectorquery()这一套异步查询机制。

常见错误是写完select()就以为能立刻拿到结果，实际要等exec()回调——不等就取值，全是null或undefined。

必须在mounted或onReady后调用，确保节点已渲染
select()传的选择器不能带空格（比如.box .inner不行），只支持单层：.box、#myId、view
真机调试时，微信小程序里boundingClientRect()比fields({ size: true })更稳；H5端两者都行，但size字段在App端某些版本会漏掉height

示例：

const query = uni.createSelectorQuery().in(this);
query.select('#myBox').boundingClientRect(data => {
  console.log(data.width, data.height); // 注意：data可能是null
});
query.exec();

为什么`uni.createSelectorQuery()`在`onLoad`里总拿不到尺寸

页面生命周期里，onLoad触发时组件树还没挂载，uni.createSelectorQuery().in(this)里的this上下文无效，查不到任何节点。

这不是bug，是渲染时机问题。哪怕加setTimeout硬等也不可靠，不同端渲染速度差异大。

正确时机只有两个：mounted（Vue2/3 Composition API可用）、onReady（兼容性更好，所有平台都支持）
如果元素是v-if动态插入的，还得在nextTick或setTimeout微任务后查——但优先用watch监听数据变化再查，比盲目延时靠谱
App端（iOS）偶尔首次exec()返回空，可尝试重试一次，加个if (!data) setTimeout(() => query.exec(), 16)

用`ref`配合`getRect()`替代`select()`的适用场景

如果你用的是Vue 3 + setup语法，且目标平台是微信小程序或H5（App端getRect()支持不全），可以用ref直接绑定节点再调getRect()，比写选择器更直观。

但注意：getRect()是uni.createSelectorQuery()的语法糖，底层还是走同一套，所以异步、时机、空值判断一个都不能少。

ref必须是字符串（如ref="myBox"），不能是响应式变量；模板里要加id或class才好查，否则getRect()可能找不到
H5端getRect()返回的top/left是相对于视口的，小程序是相对于页面左上角，计算位置时别混用

示例：

<view ref="myBox" id="myBox"></view>
// setup里
const myBox = ref(null);
onReady(() => {
  uni.createSelectorQuery().in(this).select('#myBox').boundingClientRect().exec(res => {
    const rect = res[0];
    if (rect) console.log(rect.width);
  });
});

真机上宽高为0的三个高频原因

不是代码写错了，而是环境或结构导致的“查得到节点但尺寸为0”。这种情况在微信小程序最典型，H5次之，App最少见。

父容器没设height或用了flex: 1但没给父级定高，子元素撑不开——查之前先确认CSS是否生效（真机调试器里看computed样式）
元素被v-show="false"隐藏了，boundingClientRect()仍能查到节点但返回0；换成v-if后，节点根本不存在，查出来就是null
字体加载中、图片未加载完、rich-text内容异步渲染，导致首次查询时内容高度为0；解决方案是监听load事件或用IntersectionObserver（仅小程序支持）等真正渲染完成后再查

该查的时机、该防的空值、该验的CSS，都在这几步里。跨端的“DOM”从来不是所见即所得，查之前先想清楚：它此刻在不在、有没有被撑开、是不是真渲染完了。