ru1er
ru1er
  • 发布:2022-02-17 01:38
  • 更新:2022-02-22 20:38
  • 阅读:687

【报Bug】百度小程序自定义组件uni.createSelectorQuery()无法正确获取位置信息

分类:uni-app

产品分类: uniapp/小程序/百度

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.3.11

第三方开发者工具版本号: 3.49.1

基础库版本号: 最新

项目创建方式: HBuilderX

示例代码:

index.vue

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
        <view>  
            <custom-test></custom-test>  
            <custom-test></custom-test>  
            <custom-test></custom-test>  
            <custom-test></custom-test>  
            <custom-test></custom-test>  
        </view>  

    </view>  
</template>  

<script>  
    import customTest from '../../components/custom-test.vue';  
    export default {  
        components: {  
            customTest  
        },  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  

custom-test.vue

<template>  
    <view class="wrapper-class">  
        百度小程序uni.createSelectorQuery()bug测试  
    </view>  
</template>  

<script>  
    export default {  
        name: "custom-test",  
        data() {  
            return {  

            };  
        },  
        mounted() {  
            const query = uni.createSelectorQuery().in(this);  
            query.select('.wrapper-class').boundingClientRect(data => {  
                console.log("得到布局位置信息" + JSON.stringify(data));  
                console.log("节点离页面顶部的距离为" + data.top);  
            }).exec();  
            setTimeout(() => {  
                const query = uni.createSelectorQuery().in(this);  
                query.select('.wrapper-class').boundingClientRect(data => {  
                    console.log("得到布局位置信息" + JSON.stringify(data));  
                    console.log("节点离页面顶部的距离为" + data.top);  
                }).exec();  
            }, 3000)  
        }  
    }  
</script>  

<style>  

</style>  

操作步骤:

请查看附件

预期结果:

得到布局位置信息{"id":"","dataset":{},"left":537.703125,"right":874.296875,"top":249,"bottom":270,"width":336.59375,"height":21}
custom-test.vue:25 节点离页面顶部的距离为249
custom-test.vue:24 得到布局位置信息{"id":"","dataset":{},"left":537.703125,"right":874.296875,"top":270,"bottom":291,"width":336.59375,"height":21}
custom-test.vue:25 节点离页面顶部的距离为270
custom-test.vue:24 得到布局位置信息{"id":"","dataset":{},"left":537.703125,"right":874.296875,"top":291,"bottom":312,"width":336.59375,"height":21}
custom-test.vue:25 节点离页面顶部的距离为291
custom-test.vue:24 得到布局位置信息{"id":"","dataset":{},"left":537.703125,"right":874.296875,"top":312,"bottom":333,"width":336.59375,"height":21}
custom-test.vue:25 节点离页面顶部的距离为312
custom-test.vue:24 得到布局位置信息{"id":"","dataset":{},"left":537.703125,"right":874.296875,"top":333,"bottom":354,"width":336.59375,"height":21}
custom-test.vue:25 节点离页面顶部的距离为333

实际结果:

得到布局位置信息{"id":"","dataset":{},"top":249,"right":355.6875,"bottom":270,"left":19.296875,"width":336,"height":21}
custom-test.js:133 节点离页面顶部的距离为249
custom-test.js:132 得到布局位置信息{"id":"","dataset":{},"top":249,"right":355.6875,"bottom":270,"left":19.296875,"width":336,"height":21}
custom-test.js:133 节点离页面顶部的距离为249
custom-test.js:132 得到布局位置信息{"id":"","dataset":{},"top":249,"right":355.6875,"bottom":270,"left":19.296875,"width":336,"height":21}
custom-test.js:133 节点离页面顶部的距离为249
custom-test.js:132 得到布局位置信息{"id":"","dataset":{},"top":249,"right":355.6875,"bottom":270,"left":19.296875,"width":336,"height":21}
custom-test.js:133 节点离页面顶部的距离为249
custom-test.js:132 得到布局位置信息{"id":"","dataset":{},"top":249,"right":355.6875,"bottom":270,"left":19.296875,"width":336,"height":21}
custom-test.js:133 节点离页面顶部的距离为249

bug描述:

            const query = uni.createSelectorQuery().in(this);  
            query.select('.wrapper-class').boundingClientRect(data => {  
                console.log("得到布局位置信息" + JSON.stringify(data));  
                console.log("节点离页面顶部的距离为" + data.top);  
            }).exec();

该代码在其他平台均可以正确获取位置信息,但是在百度小程序中,所有子组件获取的位置信息都一样。
具体请看示例项目附件。

2022-02-17 01:38 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

单独测试一下百度小程序(不使用 uni-app 时),是否存在此问题,如果仍然存在,反馈到百度小程序社区

  • ru1er (作者)

    百度原生小程序测试未发现此问题,可以正确获取位置信息,已经将代码上传到附件了。麻烦您这边跟进一下。

    2022-02-22 16:52

DCloud_UNI_Anne

DCloud_UNI_Anne

此问题已确认,后续优化,已加分,感谢您的反馈!

该问题目前已经被锁定, 无法添加新回复