1***@qq.com
1***@qq.com
  • 发布:2023-05-27 15:10
  • 更新:2023-10-19 13:26
  • 阅读:408

Vue3下动态渲染自定义组件,如果自定义组件内存在mode为widthFix的image标签,导致offsetWidth报错

分类:uni-app

Vue3下动态渲染自定义组件,如果自定义组件内存在mode为widthFix的image标签

将会导致Cannot read properties of null (reading 'offsetWidth')

遵循easycom定义一个empty组件,代码如下

在page中通过v-if动态控制这个组件的显示与隐藏

报错信息如下

这个错误最开始的时候是因为我用了 uni-load-more 这个组件出现的,后来我将这个组件去掉了。

然后我在开发的过程中写了这一个 empty 自定义组件,同样也出现了这个错误

针对这个错误我简单的分析了一下:

  1. 他们对于 page 页面来说都是子组件
  2. 他们都是通过 v-if 来动态展示的
  3. 他们内部都有mode为widthFix的image标签

分析出上述情况后,我怀疑是image标签出现的问题。

为了实验这个结果,我创建了一个新的基于Vue3的uniapp项目,写了一个自定义组件,然后岸上上述流程尝试复现,但没有复现出来。

然后我又返回到原来的项目。尝试将自定义组件内 image 标签的 mode="widthFix" 删除,就正常了。

经过反复尝试,所以问题肯定还出现在 image 的标签上,不过我的确没有复现出问题,可能是复现的过程中少了某个条件。

然后我在论坛中搜索该问题发现很多人和我一样,不过最终结果都不了了之。

另外,很奇怪的是这个报错是不是每次都会报,我测试了10次刷新页面,其中8次会报这个错误。

测试小程序是没这个问题的,暂时已知H5平台存在这个问题。

因为我们作为开发者不确定uniapp针对image底层做了什么东西,所以希望官方能解决一下这个问题,或者推断一下该问题出现的可能。

然后

2023-05-27 15:10 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者) - 邪恶的咖啡

新进展,我在接口获取数据后渲染页面的时候,延时了100毫秒,就没有问题了,延迟10毫秒同样也会降低报错概率。

我猜测可能是image标签在mode为widthFix模式的时候,需要计算图片高度,但是计算的时候是个异步计算过程。

在图片渲染之后,高度计算之前的这个过程中,页面重新渲染并执行了 v-if 条件,销毁了该image标签。

然后导致部分代码在计算图片高度的时候获取不到图片的宽度。

但是H5平台下给图片设置高度的时候,在不设置高的情况下,默认高度不就是根据宽度自动计算的吗?

为什么uniapp还要多此一举重新计算高度,导致了这个报错。

以上只是个人猜测,希望官方将这个地方优化一下。

1***@qq.com

1***@qq.com

碰到了同样的问题,因为接口响应只有15毫秒,setTimeout 设置15毫秒模拟错误,多刷新几次就会报错,把 setTimeout 时间调成 100 基本没有这个错误

  • 1***@qq.com

    感觉楼主分析的对,是图片的问题,我把 loading 图关掉就不报错了

    uni-load-more 的 showIcon 改成 false

    2023-10-19 14:44

要回复问题请先登录注册