<template>
<view class="content" style="height: 500px;">
<view class="left" style="height: 300rpx;background-color: red;">
</view>
<view class="right" style="height: 500rpx;background-color: blue;">
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
dataList: []
}
},
onLoad() {
const query = uni.createSelectorQuery().in(this);
this.$nextTick(() => {
query
.select(".left")
.boundingClientRect((data) => {
console.log(1);
})
.exec();
console.log(2);
query
.select(".right")
.boundingClientRect((data) => {
console.log(3);
})
.exec();
console.log(4);
});
},
methods: {
}
}
</script>
<style>
page {
}
</style>
北陌
- 发布：2022-11-29 13:45
- 更新：2022-11-30 21:01
- 阅读：793
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10- 21H2
HBuilderX类型： Alpha
HBuilderX版本号： 3.6.10
手机系统： Android
手机系统版本号： Android 12
手机厂商： 小米
手机机型： 红米k30pro
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
创建uniapp vue3项目 ，复制上述代码 ，运行app基座测试，打开后查看log。
创建uniapp vue3项目 ，复制上述代码 ，运行app基座测试，打开后查看log。
预期结果：
预期打印2，4，1，3，，
预期打印2，4，1，3，，
实际结果：
app端只打印了2，1。
但是h5，打印了1，2，1，3，4，至于为什么多打印我就不想管了。但不能少打印。
app端只打印了2，1。
但是h5，打印了1，2，1，3，4，至于为什么多打印我就不想管了。但不能少打印。
bug描述：
vue3,多个 uni.createSelectorQuery()查询boundingClientRect app端 不生效。
vue2,app端生效，vue3,h5,微信小程序 都生效，但app端只生效第一个。
2 个回复
DCloud_UNI_WZF
问题复现，感谢反馈，已加分
DCloud_UNI_WZF
createSelectorQuery api 不支持复用 query 实例，而且回调任务保存在 query 实例中，所以复用会导致同一个回调多次调用
北陌 (作者)
vue2,app端生效，vue3,h5,微信小程序 都生效，但vue3 app端不生效。那麻烦你给我一个解决方案。
2022-12-01 09:02
DCloud_UNI_WZF
回复 北陌: 设计之初就不支持这样使用，其他端能用也是有副作用的，vue3 app端复用query实例会报错，导致程序没有继续执行，暂无解决方案
2022-12-01 10:05
北陌 (作者)
回复 DCloud_UNI_WZF: 那就是同页面不能查询多个节点的信息了？
2022-12-01 15:43
DCloud_UNI_WZF
回复 北陌: 查询多个节点信息，需要创建多个query 实例
2022-12-01 16:58