uniapp 获取元素的宽高

<think>好的，我现在需要在UniApp中获取元素的宽度和高度。根据用户提供的引用内容，我需要先理解如何正确使用UniApp的API来实现这个功能。 首先，用户提到使用uni.getSystemInfo来获取系统信息，比如屏幕尺寸。这可能对调整元素布局有帮助，但用户的问题直接是关于获取元素本身的宽高。引用[2]和[5]提到使用uni.createSelectorQuery()来创建选择器查询，并通过boundingClientRect方法获取元素的位置和尺寸信息。这应该是关键步骤。 接下来，我需要确认如何正确编写这段代码。根据引用中的示例，步骤应该是：创建选择器实例，选择目标元素，执行boundingClientRect回调，并在exec()方法中执行查询。需要注意的是，在UniApp中，这些方法可能需要放在生命周期钩子如onReady中，确保DOM已经渲染完成。 另外，用户提供的引用[3]提到尝试微信小程序的方法会报错，但运行没问题。这里需要注意UniApp的跨平台兼容性，可能需要使用UniApp的特定方法，如createSelectorQuery，而不是直接使用小程序的方法。同时，引用[4]提到动态调整元素高度的方法，可能涉及计算屏幕高度与元素的关系，但当前问题更关注如何获取现有元素的宽高。 可能的陷阱包括选择器是否正确（比如类名或ID是否正确），以及异步处理的问题。因为exec()是异步的，需要在回调中处理获取到的数据。示例代码中是否使用了正确的类名，比如.replace('.类名'）为实际元素的类名或ID？ 总结步骤： 1. 使用uni.createSelectorQuery()创建实例。 2. 使用select方法选择目标元素（类名或ID）。 3. 调用boundingClientRect方法，传入回调函数获取尺寸数据。 4. 执行exec()方法触发查询。 5. 处理返回的数据，在回调中获取width和height。 需要确保代码在正确的生命周期执行，比如onReady，或者使用nextTick确保DOM就绪。同时注意跨平台兼容性，避免使用特定平台的API。</think>在UniApp中获取元素宽高的核心方法是使用$uni.createSelectorQuery$结合$boundingClientRect$接口。以下是具体实现步骤及代码示例： ### 一、获取元素宽高的实现方法 1. **创建选择器实例** 通过$uni.createSelectorQuery()$创建节点查询对象： ```javascript const query = uni.createSelectorQuery().in(this); ``` 2. **选择目标元素** 使用$select()$方法指定元素选择器（支持类选择器、ID选择器等）： ```javascript query.select('.target-element').boundingClientRect(); ``` 3. **执行查询并获取数据** 通过$exec()$方法触发异步查询，在回调函数中获取元素尺寸信息： ```javascript query.exec((res) => { if (res[0]) { const width = res[0].width; const height = res[0].height; } }); ``` ### 二、完整示例代码 ```javascript export default { mounted() { // 推荐在onReady生命周期执行 this.$nextTick(() => { const query = uni.createSelectorQuery().in(this); query.select('.box').boundingClientRect(data => { if (data) { console.log('宽度:', data.width, '高度:', data.height); } }).exec(); }); } } ``` *注意：需将$'.box'$替换为实际元素的类名或ID选择器[^2][^5]* ### 三、关键注意事项 1. **生命周期时机** 必须在$onReady$或$mounted$后执行，确保DOM已渲染完成。使用$nextTick$可避免异步渲染问题[^3] 2. **跨平台兼容性** 该方法支持微信小程序、H5、APP等多端平台，无需平台特定代码[^2] 3. **返回数据结构** $boundingClientRect$返回包含$width/height/top/left/bottom/right$等完整布局信息[^5]