Javin

发布：2023-11-13 12:19
更新：2023-11-14 13:19
阅读：420

【报Bug】微信小程序在子组件中使用wx.createSelectorQuery.in(this)..select('#id').boundingClientRect获取尺寸错误

分类：uni-app

bug反馈

产品分类： 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，但是这里应该父级去设置。  

我在别的平台使用的
```javascript  
var page = document.getElementById("page")  
var width = page.style.width  
var width = page.style.height  
``  
结果是正确的我需要在小程序上也有办法获取子组件的宽高

2023-11-13 12:19 负责人:无分享

2 个回复

YUANRJ

参考文档，设置virtualHost和mergeVirtualHostAttributes。

Javin (作者)

我看了一下微信小程序编译出来以后子组件最外层的view缺少height: 100%的，导致和其他平台的行为不统一

2023-11-14 12:07
YUANRJ

回复 Javin: 已更新回复。

2023-11-14 13:20

Javin (作者)

微信小程序中父级不能通过style直接设置子组件里元素的尺寸，例如
子级

<!--components/test/test.wxml-->  
<view style="background-color: aqua;"></view>

父级

<!--index.wxml-->  
<view class="container">  
  <test style="width: 100px; height: 100px;"/>  
</view>

此时子级的view尺寸还是width:0px; height:0px 因为微信小程序和uniapp不一样子级外面还有一层看不到的element被设置成了100px;100px
子级里的只有这样写才可以根据父级里的style设置改变尺寸

<!--index.wxml-->  
<view class="container">  
  <test style="width: 100%; height: 100%;"/>  
</view>

所以我怀疑是不是uniapp的微信小程序端height这里存在100%的设定？或者是其他问题?

要回复问题请先登录或注册

【报Bug】微信小程序在子组件中使用wx.createSelectorQuery.in(this)..select('#id').boundingClientRect获取尺寸错误

操作步骤：

使用上面的代码

预期结果：

正确显示宽高

实际结果：

宽是正确的高度永远是0

bug描述：

2 个回复

公告

相关问题

【报Bug】微信小程序在子组件中使用wx.createSelectorQuery.in(this)..select('#id').boundingClientRect获取尺寸错误

操作步骤： 使用上面的代码

预期结果： 正确显示宽高

实际结果： 宽是正确的高度永远是0

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

使用上面的代码

预期结果：

正确显示宽高

实际结果：

宽是正确的高度永远是0