uni-app 微信小程序下节点多次查询执行结果与预计不一致

uni-app 微信小程序下节点多次查询执行结果与预计不一致

示例代码：

const tabs = ["#section-0", "#section-1", "#section-2", "#section-3"];
const query = uni.createSelectorQuery().in(instance.proxy);
tabs.forEach(tab=>{
query.select(tab)?.boundingClientRect();
})
//执行所有查询
query.exec(res=>console.log(res));

操作步骤：

const tabs = ["#section-0", "#section-1", "#section-2", "#section-3"];
const query = uni.createSelectorQuery().in(instance.proxy);
tabs.forEach(tab=>{
query.select(tab)?.boundingClientRect();
})
//执行所有查询
query.exec(res=>console.log(res));

预期结果：

[
{id:'section-0',...},{id:'section-1',...},{id:'section-2',...},{id:'section-3',...}
]

实际结果：

[
{id:'section-4',...},{id:'section-1',...},{id:'section-2',...},{id:'section-3',...}
]

bug描述：

在使用uni.createSelectorQuery().in(instance.proxy)查询多次select输入查询id与结果不一致，如 ["#section-0", “#section-1”, “#section-2”, “#section-3”]，批量forEarch，然后query.exec，得到的确是 ["#section-4", “#section-1”, “#section-2”, “#section-3”]为id的元素。

const tabs = ["#section-0", "#section-1", "#section-2", "#section-3"];
const query = uni.createSelectorQuery().in(instance.proxy);
tabs.forEach(tab=>{
    query.select(tab)?.boundingClientRect();
  })
//执行所有查询
query.exec(res=>console.log(res));
结果与预计不一致

更多关于uni-app 微信小程序下节点多次查询执行结果与预计不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

试试原生微信小程序有没有这个问题

更多关于uni-app 微信小程序下节点多次查询执行结果与预计不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是 uni-app 中 createSelectorQuery 的常见问题。问题在于查询实例的复用导致结果覆盖。

在循环中多次调用 query.select() 时，每个新的 select() 调用会覆盖前一个查询条件，最终只保留最后一个查询条件。这就是为什么你看到的是 section-4 而不是 section-0。

正确写法：

const tabs = ["#section-0", "#section-1", "#section-2", "#section-3"];
const query = uni.createSelectorQuery().in(instance.proxy);

tabs.forEach(tab => {
  query.select(tab).boundingClientRect();
});

query.exec(res => {
  console.log(res); // 现在会按顺序返回所有节点的信息
});
回到顶部