r***@qq.com

发布：2019-05-22 15:10
更新：2022-09-17 12:09
阅读：5434

【报Bug】自定义组件中使用 uni.createSelectorQuery() 返回null的问题

分类：HBuilderX

自定义组件模式 Vue api uni_app uniapp

详细问题描述

（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）

自定义组件模式下，使用uni.createSelectorQuery() 以及 uni.createSelectorQuery().in(this) 都查询不到元素

[内容]

重现步骤

[步骤]
使用 uni.createSelectorQuery().select('#t').fields({
size: true
}, (data) => {
console.log(data)
})
在控制台打印id为t的节点的尺寸

[结果]
安卓基座、iOS基座返回null，H5有返回值

[期望]
各平台下不返回null，而是该节点对应的尺寸

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]
HBuilderX

[IDE版本号]
1.9.8

[windows版本号]
Win7

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序？]
H5

[运行端版本号]
最新的基座，连接数据线后由HBuilder自动安装

[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]
HBuilderX创建

[编译模式是老模板模式还是新的自定义组件模式？]
自定义组件模式，"usingComponents" : true 已设置

App运行环境说明

[Android版本号]
6.0

[iOS版本号]
12.2

[手机型号]
iPhone 7，乐视Le X620

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]413952108

2019-05-22 15:10 负责人:无分享

8 个回复

Adyen

要在后面加上 .in(this)

selectorQuery.in(component)
将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

代码示例

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

9***@qq.com

这个楼主的方案是可以的采用这个

2021-09-07 09:40
1***@qq.com

牛啊，试了好多种，只有整个楼主方案可以解决。感谢！！！

2023-05-22 17:18

ZGH0709

我这边使用的是版本为 1.9.8.20190518 的 HBuilderX，测试未复现问题。请确认代码书写方式，如仍有问题可提供复现 demo 和编辑器的准确版本号。

3***@qq.com

在2.2.1.20190813中也有这样的问题

let selector = uni.createSelectorQuery();

selector.select('.room_head').boundingClientRect();

selector.select('.room_last_expect').boundingClientRect();

selector.select('.room_tabbar').boundingClientRect();

selector.exec(function(res){

console.log('exec',res);

})

2019-08-27 13:19

9***@qq.com - 90后It男

同样的问题，是在OnReady后调用，并且还延时了也不行

r***@qq.com (作者)

vue自带的mounted()里调用也不行。不知道官方有没有好的解决方案

2019-05-29 13:18

倒影 - 记忆的时间差.

一样，也时不进的获取不到，报错

s***@cnso360.com

一样，安卓返回null，h5返回正常，HBuilderX版本：2.1.3.20190723
const query = uni.createSelectorQuery().in(this).select('#IndexContent');
query.boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
}).exec();

9***@qq.com

只能选择当前组件的节点，不能选择子组件的

2019-08-02 11:50
肖建军

回复 9***@qq.com: 什么意思

2024-04-05 20:59