成都大胜
成都大胜
  • 发布:2023-07-05 14:04
  • 更新:2025-04-25 17:01
  • 阅读:679

【报Bug】小程序V3 自定义组件设置id属性后createSelectorQuery获取节点信息为NULL

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 22H2(22621.1848)

第三方开发者工具版本号: v1.06.2306020

基础库版本号: 2.33.3

项目创建方式: CLI

CLI版本号: 3.0.0-alpha-3040820220424001

示例代码:
<template>  
<view id="tabs" class="tabs">  
</view>  
</template>  

<script lang="ts" setup>  
// 监听滚动  
onPageScroll((e) => {  
    console.log(e);  

    nextTick(() => {  
        const query = uni.createSelectorQuery();  
        query  
            .select('#tabs')  
            .boundingClientRect((data) => {  
                console.log(data, 'data');  
            })  
            .exec();  
    });  
});  
</script>  
<style lang="scss" scoped>  
.tabs {  
    display: flex;  
    flex: 1;  
    width: 100%;  
    flex-direction: column;  
    height: 3880rpx;  
}  
</style>

操作步骤:

设置高度大于屏幕,滚动

预期结果:

获取到dom对象

实际结果:

null

bug描述:

小程序V3 自定义组件设置id属性后createSelectorQuery获取节点信息为NULL

2023-07-05 14:04 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

通过你提供的代码片段运行后 可以获取到节点信息
在vue3中你可以用这种方法再试试

import {getCurrentInstance} from 'vue'  
const instance = getCurrentInstance()  

const query = uni.createSelectorQuery().in(instance);  
query    
            .select('#tabs')    
            .boundingClientRect((data) => {    
                console.log(data, 'data');    
            })    
            .exec();  
  • 成都大胜 (作者)

    我这里真的获取不到?你是在微信开开发者工具里边试的吗?

    2023-07-05 15:48

  • 爱豆豆

    回复 成都大胜: cli创建的项目 然后在微信小程序中测试

    2023-07-05 15:59

  • 成都大胜 (作者)

    回复 爱豆豆: 好的。我这里确实获取不到,不过我用classn能获取到。不纠结了。多谢

    2023-07-05 16:14

成都大胜

成都大胜 (作者)

完整的测试代码

<template>  
    <view id="tabs" class="tabs"></view>  
</template>  

<script lang="ts" setup>  
import { onPageScroll } from '@dcloudio/uni-app';  
import { getCurrentInstance, nextTick } from 'vue';  

// 监听滚动  
onPageScroll((e) => {  
    console.log(e);  

    nextTick(() => {  
        const instance = getCurrentInstance();  
        const query = uni.createSelectorQuery().in(instance);  
        query  
            .select('#tabs')  
            .boundingClientRect((data) => {  
                console.log(data, 'data');  
            })  
            .exec();  
    });  
});  
</script>  
<style lang="scss" scoped>  
.tabs {  
    display: flex;  
    flex: 1;  
    width: 100%;  
    flex-direction: column;  
    height: 3880rpx;  
}  
</style>  
爱豆豆

爱豆豆 - 办法总比困难多

正常打印

<template>    
    <view id="tabs" class="tabs"></view>    
</template>    

<script setup>    
import { onPageScroll } from '@dcloudio/uni-app';    
import { getCurrentInstance, nextTick } from 'vue';    
const instance = getCurrentInstance();    
// 监听滚动    
onPageScroll((e) => {    
    console.log(e);    

    nextTick(() => {    
        const query = uni.createSelectorQuery().in(instance);    
        query    
            .select('#tabs')    
            .boundingClientRect((data) => {    
                console.log(data, 'data');    
            })    
            .exec();    
    });    
});    
</script>    
<style scoped>    
.tabs {    
    height: 3880px;    
}    
</style>  
  • 成都大胜 (作者)

    好的。我这里确实获取不到,不过我用class能获取到,可能是环境的原因。不纠结了。多谢,多谢

    2023-07-05 16:16

  • 爱豆豆

    回复 成都大胜: enen

    2023-07-05 16:33

s***@aliyun.com

s***@aliyun.com

TypeError: Cannot read property '$scope' of null
at Object.newIn [as in] (uni.api.esm.js:1386)
at Object.<anonymous> (RefreshList.js:173)(env: Windows,mp,1.06.2412050; lib: 3.8.1)

s***@aliyun.com

s***@aliyun.com

onReady(() => {
let height = uni.getWindowInfo().windowHeight
console.log('屏幕高度=' + height)
nextTick(() => {
const instance = getCurrentInstance()
const query = uni.createSelectorQuery().in(instance);
query.select('.refresh_list')
.boundingClientRect((data) => {
console.log('节点信息=', data);
})
.exec();
})
})
我在组件内使用上边方法在微信小程序上报以下错误
屏幕高度=812
TypeError: Cannot read property '$scope' of null
at Object.newIn [as in] (uni.api.esm.js:1386)
at Object.<anonymous> (RefreshList.js:173)(env: Windows,mp,1.06.2412050; lib: 3.8.1)
index.esm.js:483 {reason: TypeError: Cannot read property '$scope' of null
at Object.newIn [as in] (http://127.0.0.1:5025…, promise: Promise}(env: Windows,mp,1.06.2412050; lib: 3.8.1)
onError2 @ index.esm.js:483

要回复问题请先登录注册