uni-app uni-popup 组件获取dom元素数值不正确

uni-app uni-popup 组件获取dom元素数值不正确

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
### 示例代码：


```html
<template>
<view>
<uni-popup ref="popup_zb_ref" type="center">
<view class="pop_box isFlexalitem"></view>
</uni-popup>
</view>
</template>  
<script>
export default {
methods:{
open(){
this.$refs.popup_zb_ref.open()
this.$nextTick(()=>{
setTimeout(()=>{
const query = uni.createSelectorQuery().in(this);
query.select('.pop_box').boundingClientRect(data => {
console.log("data: " + JSON.stringify(data));
}).exec();
},100)
})
}
}
}
</script>
<style>
.pop_box{
width:600rpx;
height:100rpx;
background: white;
border: 1rpx solid red;
}
</style>

操作步骤：

如果把 <view class="pop_box isFlexalitem"></view> 放在uni-popup 组件中，获取dom的宽度为360， 而如果不放在uni-popup组件中，获取dom的宽度为300

预期结果：

如果把 <view class="pop_box isFlexalitem"></view> 放在uni-popup 组件中，获取dom的宽度为300，

实际结果：

如果把 <view class="pop_box isFlexalitem"></view> 放在uni-popup 组件中，获取dom的宽度为360，



### bug描述：


```javascript
const query = uni.createSelectorQuery().in(this);
获取dom元素信息，数值不正确；

更多关于uni-app uni-popup 组件获取dom元素数值不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni-popup 组件获取dom元素数值不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的渲染时机问题。uni-popup 组件在隐藏状态下其内部元素并未实际渲染到 DOM 中，当你调用 open() 方法后，组件才开始渲染并执行动画。

在你的代码中，虽然使用了 this.$nextTick() 和 setTimeout 来延迟查询，但 100ms 可能仍然不足以让 popup 完全渲染完成并应用所有样式（尤其是在动画尚未结束时进行测量）。

解决方案：

  1. 监听 popup 的打开事件：uni-popup 提供了 @change 事件，当 popup 完全打开后触发。
  2. 确保在正确的时机查询：在 @change 事件回调中执行 DOM 查询，此时组件已经完成渲染。

修改后的代码示例：

<template>
  <view>
    <uni-popup ref="popup_zb_ref" type="center" @change="onPopupChange">
      <view class="pop_box"></view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  methods: {
    open() {
      this.$refs.popup_zb_ref.open()
    },
    onPopupChange(e) {
      if (e.show) { // 确保在打开状态时查询
        this.$nextTick(() => {
          const query = uni.createSelectorQuery().in(this)
          query.select('.pop_box').boundingClientRect(data => {
            console.log("正确的数据: " + JSON.stringify(data))
          }).exec()
        })
      }
    }
  }
}
</script>
回到顶部