uniapp获取元素的宽高
时间: 2025-06-07 21:40:18 浏览: 13
### UniApp 中获取元素宽度和高度的方法
在 UniApp 开发中,可以通过 `uni.createSelectorQuery()` API 来动态获取页面中某个 DOM 元素的尺寸信息(如宽度和高度)。以下是具体实现方式以及注意事项:
#### 使用 `uni.createSelectorQuery` 获取元素宽高
通过调用 `uni.createSelectorQuery().in(this)` 创建查询对象,并指定目标节点的选择器 `.class-name` 或者 `#id-name`。接着使用方法链调用 `boundingClientRect(callback)` 将返回的结果传递给回调函数,在其中可以读取到所需的宽高属性。
```javascript
// 示例代码:获取 .example-class 的宽高
uni.createSelectorQuery()
.in(this) // 如果是在组件内部,则需要加上此行;如果是页面则可省略
.select('.example-class') // 替换为实际的目标选择器
.boundingClientRect(data => {
console.log('元素宽度:', data.width);
console.log('元素高度:', data.height);
})
.exec();
```
上述代码片段展示了如何利用 `boundingClientRect` 方法取得选定 HTML 节点的位置与大小信息[^4]。
#### 同步 vs 异步执行区别
需要注意的是,`.exec()` 是异步操作的一部分,它会触发之前定义好的所有回调处理程序并立即结束当前查询批次。如果仅需单一值而无需复杂逻辑组合时也可以考虑同步版本即直接访问单个 promise 值的方式简化流程[^5]。
另外还有一种更简便但功能有限的情况适用于整个窗口范围而非特定子项——那就是借助于系统级接口 `uni.getSystemInfo` 可快速拿到全局视口参数比如屏幕分辨率等基本信息作为替代方案之一[^3]:
```javascript
uni.getSystemInfo({
success(res){
const {windowWidth, windowHeight} = res;
console.log(`Screen Width:${windowWidth}, Screen Height:${windowHeight}`);
}
});
```
但是这种方法无法满足针对独立控件测量的需求所以并不推荐用于精确控制场景下的开发需求之中除非确实只需要知道设备显示区域概况即可完成任务规划。
---
### 总结
综上所述,对于大多数情况下希望获得某一部分确切几何特性的应用而言,采用基于 CSS Selectors 查询机制配合 boundingClientRect 数据提取手段是最通用也是最灵活的做法[^1][^2]。同时也要注意区分不同上下文中可能存在的细微差异以便正确实施相应策略从而达到预期效果。
阅读全文
相关推荐

















