uni-app 【报Bug】uni.createSelectorQuery().in(this).select('.xxx')获取节点信息都为0

uni-app 【报Bug】uni.createSelectorQuery().in(this).select(’.xxx’)获取节点信息都为0

项目属性 值
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10 专业版
HBuilderX类型 正式
HBuilderX版本号 3.1.18
第三方开发者工具版本号 1.05.2106091
基础库版本号 2.17.3
项目创建方式 HBuilderX

操作步骤：

node .select('.xxx').boundingClientRect(data => {  
    console.log(data);  
}).exec();

预期结果：

uni-popup组件弹出后，能通过uni.createSelectorQuery().in(this).select('.xxx')获取到弹框内子节点具体信息

实际结果：

未获取到

bug描述：

uni-popup组件弹出后，uni.createSelectorQuery().in(this).select(’.xxx’)获取弹框内的子节点数据一直为0

img


更多关于uni-app 【报Bug】uni.createSelectorQuery().in(this).select('.xxx')获取节点信息都为0的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 【报Bug】uni.createSelectorQuery().in(this).select('.xxx')获取节点信息都为0的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的异步渲染问题。uni-popup组件在弹出时存在渲染延迟，导致在弹出后立即执行查询时节点尚未完成布局渲染。

解决方案：

  1. 使用nextTick延迟查询
this.$nextTick(() => {
  uni.createSelectorQuery().in(this)
    .select('.xxx')
    .boundingClientRect(data => {
      console.log(data);
    })
    .exec();
});
  1. 添加setTimeout延迟
setTimeout(() => {
  uni.createSelectorQuery().in(this)
    .select('.xxx')
    .boundingClientRect(data => {
      console.log(data);
    })
    .exec();
}, 100);
  1. 监听popup的open事件 如果使用的是uni-popup组件，可以在[@open](/user/open)事件触发后再执行查询：
<uni-popup [@open](/user/open)="onPopupOpen">
  // popup内容
</uni-popup>

onPopupOpen() {
  this.$nextTick(() => {
    uni.createSelectorQuery().in(this)
      .select('.xxx')
      .boundingClientRect(data => {
        console.log(data);
      })
      .exec();
  });
}
回到顶部