<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>

- 发布:2023-07-05 14:04
- 更新:2025-04-25 17:01
- 阅读:679
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 22H2(22621.1848)
第三方开发者工具版本号: v1.06.2306020
基础库版本号: 2.33.3
项目创建方式: CLI
CLI版本号: 3.0.0-alpha-3040820220424001
示例代码:
操作步骤:
设置高度大于屏幕,滚动
设置高度大于屏幕,滚动
预期结果:
获取到dom对象
获取到dom对象
实际结果:
null
null
bug描述:
小程序V3 自定义组件设置id属性后createSelectorQuery获取节点信息为NULL



爱豆豆 - 办法总比困难多
通过你提供的代码片段运行后 可以获取到节点信息
在vue3中你可以用这种方法再试试
import {getCurrentInstance} from 'vue'
const instance = getCurrentInstance()
const query = uni.createSelectorQuery().in(instance);
query
.select('#tabs')
.boundingClientRect((data) => {
console.log(data, 'data');
})
.exec();

成都大胜 (作者)
完整的测试代码
<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>

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)

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
成都大胜 (作者)
我这里真的获取不到?你是在微信开开发者工具里边试的吗?
2023-07-05 15:48
爱豆豆
回复 成都大胜: cli创建的项目 然后在微信小程序中测试
2023-07-05 15:59
成都大胜 (作者)
回复 爱豆豆: 好的。我这里确实获取不到,不过我用classn能获取到。不纠结了。多谢
2023-07-05 16:14