uni-app 微信小程序在子组件中使用 wx.createSelectorQuery.in(this).select('#id').boundingClientRect 获取尺寸错误
uni-app 微信小程序在子组件中使用 wx.createSelectorQuery.in(this).select(’#id’).boundingClientRect 获取尺寸错误
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 13.5.2 | HBuilderX |
产品分类：uniapp/小程序/微信
PC开发环境操作系统：Mac
PC开发环境操作系统版本号：13.5.2 (22G91)
HBuilderX类型：Alpha
HBuilderX版本号：3.97
第三方开发者工具版本号：1.06.2209190
基础库版本号：3.2.0
项目创建方式：HBuilderX
示例代码：
子组件 test.vue
<template>
<view id="page" style="background-color: aqua;"></view>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
setTimeout(() => {
wx.createSelectorQuery()
.in(this)
.select('#page')
.boundingClientRect()
.exec((rect) => {
console.log("resresresresres")
console.log(rect)
})
}, 1000);
}
}
</script> 父组件如下 index.vue
<template>
<test style="width: 100px; height: 100px;"></test>
</template>操作步骤：
使用上面的代码
预期结果：
正确显示宽高
实际结果：
宽是正确的高度永远是0
bug描述：
子组件 test.vue 如下里面用到了 boundingClientRect 获取尺寸
<template>
<view id="page" style="background-color: aqua;"></view>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
setTimeout(() => {
wx.createSelectorQuery()
.in(this)
.select('#page')
.boundingClientRect()
.exec((rect) => {
console.log("resresresresres")
console.log(rect)
})
}, 1000);
}
}
</script> 父组件如下
<template>
<test style="width: 100px; height: 100px;"></test>
</template>打印的结果宽是 100 但是高是 0
只有我在子组件里面
<template>
<view id="page" style="width:100px; height:100px; background-color: aqua;"></view>
</template> 打印出来的结果才是对的宽高都是 100，但是这里应该父级去设置。
我在别的平台使用的
5 回复
微信小程序中父级不能通过style直接设置子组件里元素的尺寸，例如 子级
<view style="background-color: aqua;"></view> 父级
<view class="container"> <test style="width: 100px; height: 100px;"/> </view> 此时子级的view尺寸还是width:0px; height:0px 因为微信小程序和uniapp不一样子级外面还有一层看不到的element被设置成了100px;100px 子级里的只有这样写才可以根据父级里的style设置改变尺寸 <view class="container"> <test style="width: 100%; height: 100%;"/> </view> 所以我怀疑是不是uniapp的微信小程序端height这里存在100%的设定？或者是其他问题?
在 uni-app 中开发微信小程序时，如果你在子组件中使用 wx.createSelectorQuery().in(this).select('#id').boundingClientRect 获取尺寸时出现错误，可能是由于以下几个原因导致的：
1. this 上下文问题
- 在子组件中使用
wx.createSelectorQuery().in(this)时，this必须指向子组件的实例。如果this指向不正确，可能会导致无法正确获取到元素。 - 确保你在子组件的方法中调用
wx.createSelectorQuery().in(this)，而不是在父组件中调用。
2. #id 选择器问题
#id选择器必须确保在子组件中存在，并且是唯一的。如果#id选择器在子组件中不存在，或者有多个相同的id，可能会导致获取不到正确的元素。- 确保你在子组件的模板中正确使用了
id，并且id是唯一的。
3. 组件渲染时机问题
- 如果你在组件刚创建时就调用
wx.createSelectorQuery().in(this).select('#id').boundingClientRect，可能会导致获取不到正确的尺寸，因为此时组件可能还没有完全渲染完成。 - 你可以尝试在
mounted生命周期钩子中调用该方法，或者在setTimeout中延迟调用，以确保组件已经渲染完成。
4. boundingClientRect 回调问题
boundingClientRect是一个异步方法，它需要传入一个回调函数来获取结果。如果你没有正确处理回调函数，可能会导致获取不到正确的尺寸。- 确保你正确处理了
boundingClientRect的回调函数，并且在回调函数中处理获取到的尺寸数据。
示例代码
以下是一个在子组件中正确使用 wx.createSelectorQuery().in(this).select('#id').boundingClientRect 的示例：
// 子组件
export default {
mounted() {
this.getRect();
},
methods: {
getRect() {
wx.createSelectorQuery()
.in(this)
.select('#myElement')
.boundingClientRect((rect) => {
if (rect) {
console.log('获取到的尺寸:', rect);
} else {
console.error('获取尺寸失败');
}
})
.exec();
}
}
}<!-- 子组件模板 -->
<template>
<view id="myElement">
<!-- 子组件内容 -->
</view>
</template>