youzan / vant-weapp

轻量、可靠的小程序 UI 组件库
https://vant.pro/vant-weapp/
MIT License
17.67k stars 3.48k forks source link

[Bug Report] tabs组件报错Cannot read properties of null (reading \'width\') #5210

Open pointline opened 1 year ago

pointline commented 1 year ago

重现链接

Vant Weapp 版本

1.10.12

描述一下你遇到的问题。

感谢vant-weapp团队提供组件

我的问题: 使用tabs组件,但是tab是通过数据请求,然后数据遍历渲染出来的。小程序统计JS报错Cannot read properties of null (reading \'width\'), 查看组件源码发现,猜测可能是tabs组件中在mountd使用requestAnimationFrame执行任务,是否可以将requestAnimationFrame替换为nextTick。因为渲染tags有可能内部tab还没有遍历渲染完,就不能获取到内部的tab元素

小程序报错截图

image

小程序编译代码断点截图

image

源代码tabs组件截图

image image

感谢帮助

重现步骤

  1. 一个固定静态tab
  2. 其他tab通过数据遍历

设备/浏览器

Android

johnsonwong666 commented 1 year ago

我尝试了一下setTimeout去异步获取数据并设置data 但是没有看到控制台有错误信息 可以提供一个小程序代码片段吗?

lionztt commented 3 months ago

该问题有个类似的问题,当页面切换过快,tabs元素来不及渲染,此时获取也是null,会导致line位置错误和js报错:Cannot read property 'width' of null,这里能否更改获取元素时机呢