- 当前 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,却不会发生数据相窜的情况