赵永强
赵永强
  • 发布:2023-09-19 09:09
  • 更新:2024-01-18 12:01
  • 阅读:309

【报Bug】uni.createSelectorQuery()在小程序中获取元素的属性是null,在h5和app中没有此问题

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11 家庭中文版

HBuilderX类型: 正式

HBuilderX版本号: 3.8.12

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

基础库版本号: 3.10

项目创建方式: HBuilderX

示例代码:

页面这样写没问题

<template>  
    <view class="content">  
        <scroll-view scroll-y="true" >  
            <view class="scroll"></view>  
        </scroll-view>  
    </view>  
</template>  

<script setup>  
    import{ onMounted,nextTick} from 'vue'  
    onMounted(()=>{  
        nextTick(()=>{  
            const query = uni.createSelectorQuery();  
            query.select('.scroll').boundingClientRect();  
            query.exec((res) => {  
                console.log('page的res',res);  
            });  
        })  
    })  
</script>  

<style>  

</style>  

操作步骤:

新建r-tab组件,内容如下

<template>  
    <view class="content">  
        <scroll-view scroll-y="true" >  
            <view class="scroll"></view>  
        </scroll-view>  
    </view>  
</template>  

<script setup>  
    import{ onMounted,nextTick} from 'vue'  
    onMounted(()=>{  
        nextTick(()=>{  
            const query = uni.createSelectorQuery();  
            query.select('.scroll').boundingClientRect();  
            query.exec((res) => {  
                console.log('page的res',res);  
            });  
        })  
    })  
</script>  

<style>  

</style>

在页面引入

<template>  
    <view class="content">  
        <r-tab></r-tab>  
    </view>  
</template>  

<script setup>  
    import{ onMounted,nextTick} from 'vue'  
    onMounted(()=>{  

    })  
</script>  

<style>  

</style>  

预期结果:

实际结果:

bug描述:

uni.createSelectorQuery()在小程序中获取元素的属性是null,在h5和app中没有此问题,同样的代码在页面中没问题,在组件中就是null

2023-09-19 09:09 负责人:无 分享
已邀请:
5***@qq.com

5***@qq.com

可以先
const proxy =getCurrentInstance().proxy

setTimeout(() => {
const query = uni.createSelectorQuery().in(proxy)
query
.select('#box')
.boundingClientRect(data => {
console.log(data, '-----------data')
itemHeight.value = data.height
})
.exec()
}, 10)

红A

红A - 前端

组件中使用需要加上this

  • 赵永强 (作者)

    setup中没有this

    2023-09-19 09:17

  • 红A

    回复 赵永强: getCurrentInstance

    2023-09-19 11:51

  • 赵永强 (作者)

    回复 红A: 试过了,不起作用,必须设置了宽才能获取到width,但是在pages里不设置也能获取到,就是奇怪

    2023-09-19 12:30

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

楼上提供的 vue setup 的使用方法能解决你的问题吗?欢迎你进行反馈

const ins = getCurrentInstance()  
const getScrollViewWidth = () => {  
    const query = uni.createSelectorQuery().in(ins)  
    query.select('.scroll-view').boundingClientRect();  
    query.exec((res) => {  
        console.log('组件的res',res);  
    });  
};

这种方案我测试微信中可以使用。你组件内是空的,随便填写几个字符,打印 width 有值

要回复问题请先登录注册