自定义组件动态渲染问题请教!动态渲染自定义组件,发生组件之间数据相窜情况,求解
发布于 4 年前 作者 maolei 6420 次浏览 来自 官方Issues
  • 当前 Bug 的表现(可附上截图)

示意结构:

顶部tabsbar

每个tab对应一个内容容器

内容容器中对内容进行渲染

为了减少页面dom,不进行全量tab对应容器组件的渲染,

每次只渲染当前tab和相邻的2个tab的数据,

[左边tab容器] [当前tab容器] [下一个tab容器]

举个例子:

当前tab为3,那需要渲染的tab就是2、3、4,这3个tab,

当点击到tab4时,需要渲染的tab就是3、4、5,这3个tab

每次切换tab后,会对当前tab的容器进行渲染,

加载对应容器的内容展示。

tab容器为同一个组件,通过组件设置id进行区分,

每次点击tab,会更新需要渲染的tabs,

通过组件id进行组件的选择

然后对tab对应的容器渲染

为了测试方便展示数据动态增量(只在对应id组件内),

数据测试时进行了concat增量,

现在发现容器组件会发生数据相窜,

提供了代码片段,

在容器内进行了测试数据输出

  • 预期表现

点击tab,只渲染对应容器的内容

  • 复现路径

点击tab->

容器测试数据输出->

切换tab->

数据相窜结果出现

  • 提供一个最简复现 Demo

https://developers.weixin.qq.com/s/FTBOx6m87ia8

  • 补充

如果不进行tab的动态更新,直接渲染全量tab,却不会发生数据相窜的情况

1 回复

兄dei,你每次点同一个tab试试(一直点第三个),会重复加很多数据(这是容器三,然后下面还有一大堆3),问题就出在这,看起来好鬼畜。

回到顶部