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