[{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"目前，给表格组件赋值一个拥有大量数据的对象数组时所造成的卡顿显示，是 iVX 内部的逻辑运算和浏览器的渲染组成，它们都是由大量节点的生成/删除与修改所造成的。因此，巨量数据展示和编辑场景，不推荐使用表格容器，我们可使用"},{"attributes":{"color":"#595959","background":"#fafafa"},"insert":"虚拟表格实现。"},{"insert":"本demo提供里一个可以直接使用的小模块，体验时点击按钮调用函数会创建模拟数据，点击单元格可编辑数据。\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-4618a8e41ed5193b84ee99269170ab73_77073_695_71.png"}},{"insert":"\n"},{"attributes":{"color":"#a5a5a5","lineHeight":"100%"},"insert":"给表格容器赋值一个1000行20列的数据所需要的响应时间"},{"attributes":{"align":"center"},"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"实现思路是要减少响应时间就需要减少需要修改的节点，所以我们可以只显示表格所能显示的节点，并保持节点不变，只修改节点显示的内容即可，如图所示："},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-1f566567a2bfaded1f5d73e408d7feb8_64235_1024_629.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"首先需要通过表格实际高和表格行高计算出需要显示的行数"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-ceb00ccb16f8c86bc02e69a2032f72e5_31697_468_81.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"然后根据滚动的顶部偏移得到行数偏移"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-e90efe4f239f95eebedc2c3f718a1586_47510_849_82.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"同理可以得出显示列数和列数偏移，便能得到需要显示的内容。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-ac8c996bbf5060248a9930a378126e30_286837_865_657.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"想要编辑表格内容时，就在点击单元格事件中获取单元格的位置与内容，然后赋值给输入框并在失焦事件中修改表格内容。或者也可以从一开始就把文本组件替换成输入框。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-9adccdb145539601674c604c485dbcac_143709_794_374.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-7661b3dfac37461afb30f1f8b4da5d33_75693_647_210.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"输入框版单元格可以直接将修改事件绑定在上面，也就不需要另外的输入框了。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-2d2e2a56cbbcb536c462e0b06ae8c092_39611_347_207.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"现在需要做的就是在滚动的时候能够使显示的内容更新，此时有两种做法：一是直接将内容绑定在文本组件上，然后就可以依靠 iVX 内部处理实现自动更新。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-6450daf12fc1790b624ccd22c187c55a_42917_357_129.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"这种方法可以应对表格显示内容不多的情况，但如果显示内容过多，也会导致 iVX 内部的运算过多而造成卡顿："},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-1e62e7def5527dda824e3f1c9b65009c_111229_436_280.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"另外，也可以给滚动渲染逻辑加一个防抖，这样可以在快速滚动时不加载无用的数据。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-9c5768344b0efaadbe3ffefb8baa8cc0_146241_656_354.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-65a2c979e9a16e9065a5bb9a0016bc03_62237_726_161.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"设置间隔为 20 毫秒时效果如下"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-0164e03c0499fade5a4626c20e12aa03_1238305_860_652.gif"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"二是跳过 iVX 内部对单元格的赋值，直接使用函数获取文本组件，然后手动在滚动时设置文本组件所显示的内容。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-ccf8f6b6530b00cb210e047d992f10d3_130544_454_345.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"由于没有对文本组件进行赋值，此时单元格的内容只会是初始化数值，想要获取实际数值就只能通过当前单元格序号以及偏移量求出。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":{"image":"R10580997-d8928b462dc2d25ba41e3394f392867f_146132_836_204.png"}},{"insert":"\n"}]
[{"insert":"制作可编辑表格，实现巨量数据的展示和编辑时具有一定的流畅性\n"}]
R10580997-e1bf46dad2edf87d5985e8c4881436ef_38454_870_668.png
https://v4pre.h5app.com/play/UpCRQoQk