uni-app 页面在后台时动态id获取节点信息报错 Cannot read property 'ref' of undefined

uni-app 页面在后台时动态id获取节点信息报错 Cannot read property ‘ref’ of undefined

类别	信息
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	window10
HBuilderX类型	正式
HBuilderX版本号	3.95
手机系统	Android
手机系统版本号	Android 11
手机厂商	华为
手机机型	Pixel 6 Pro API 30
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

示例代码：

<template>  
  <view>  
    <view v-for="item in list" :id="item" :key="item" :ref="item">  

    </view>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {  
        list: ['tabs001', 'tabs002', 'tabs003']  
      }  
    },  
    onReady() {  
      setInterval(() => {  
        var queryTabSize = uni.createSelectorQuery().in(this);  
        for (var i = 0; i < this.list.length; i++) {  
          queryTabSize.select('#' + this.list[i]).boundingClientRect().exec(res => {  
            console.log(res)  
          });  
        }  
      }, 6000)  
    }  
  }  
</script>

操作步骤：

页面在后台，定时器获取节点报错 Cannot read property ‘ref’ of undefined

预期结果：

如果id是写死的好像不报错，希望动态拿动态id信息也不报错

实际结果：

动态id拿节点信息报错

bug描述：

这个页面发放中第二个tabbar栏切换到首页的时候获取节点就会报错Cannot read property ‘ref’ of undefined

eggper 1楼•5 天前

不切换页面，直接渲染上面的代码有报错吗

vueper 2楼•5 天前作者

不切换页面的时候，不会报错

itying888 3楼•5 天前

在 uni-app 中，当页面处于后台时，尝试获取动态 id 的节点信息时，可能会遇到 Cannot read property 'ref' of undefined 的错误。这通常是因为页面在后台时，某些生命周期钩子或方法没有被正确执行，导致节点信息无法获取。

可能的原因和解决方案：

页面生命周期问题：
- 当页面进入后台时，onLoad、onShow 等生命周期钩子可能不会被执行，导致某些初始化操作没有完成。
- 解决方案：确保在 onShow 或 onReady 生命周期钩子中执行获取节点信息的操作，而不是在 onLoad 中。
节点未渲染：
- 如果页面在后台时，某些节点可能还未渲染，导致获取节点信息失败。
- 解决方案：在获取节点信息之前，确保节点已经渲染完成。可以使用 this.$nextTick 来确保 DOM 更新完成后再获取节点信息。
动态 id 问题：
- 如果 id 是动态生成的，确保在获取节点信息时，id 已经正确设置。
- 解决方案：在获取节点信息之前，确保 id 已经正确赋值。
使用 uni.createSelectorQuery()：
- uni-app 提供了 uni.createSelectorQuery() 方法来获取节点信息。确保在正确的时机调用该方法。
- 解决方案：在 onReady 或 onShow 生命周期钩子中使用 uni.createSelectorQuery() 获取节点信息。

示例代码：

export default {
  data() {
    return {
      dynamicId: 'myDynamicId'
    };
  },
  onReady() {
    this.$nextTick(() => {
      this.getNodeInfo();
    });
  },
  methods: {
    getNodeInfo() {
      uni.createSelectorQuery().select(`#${this.dynamicId}`).boundingClientRect(data => {
        if (data) {
          console.log('节点信息:', data);
        } else {
          console.error('未找到节点');
        }
      }).exec();
    }
  }
};