聚合物1.0+铁列表加载隐藏列表项?

时间:2015-08-18 18:30:12

标签: polymer polymer-1.0 paper-elements

聚合物的iron-list元素加载一堆未使用/隐藏的列表项是否正常,即使它实际上只将少量数组项传递给它的items属性?

我有一个铁列表,目前传递了4个项目的长度,但如果需要,可以提供更长的列表的屏幕空间。然而,当我在Chrome中检查渲染的铁列表元素时,其“items”div中有4个可见项和16个隐藏项。我想这可能与准备滚动/分页列表有关?如果是这样,有没有办法阻止铁列表完成准备较小阵列不需要的项目模板的所有工作?

我注意到我的应用程序中的其他地方发生了类似的事情,其中​​铁列表提供了长度为1的数组。在这种情况下,这确实存在问题,因为此列表的项模板包含更复杂的自定义元素,然后'准备'20次,而不是一次。这确实对应用程序的加载时间/性能产生了巨大影响。

希望这里有一个简单的解决方案,我不必在这个应用程序中重新考虑我对铁列表的使用。也许我做错了什么。谢谢!

似乎有人在GitHub上提出了这个问题:https://github.com/PolymerElements/iron-list/issues/55

2 个答案:

答案 0 :(得分:1)

是的,这是正确的行为。而不是创建或删除DOM元素iron-list回收单元格以在移动设备上平滑滚动。因此,默认情况下,无论数据量是数十还是数千项,它都将始终生成20个项目。这个polycast更多地解释了黄油平滑滚动。

要尝试的事情:

  1. 我会将您的铁列表<template>内容保持在1级深度。 (不要在这里嵌套标签,只使用绝对最少量的元素。你也可以尝试绝对的CSS定位)
  2. 如果您的模板行非常大,您可以尝试使用铁列表私有_physicalCount属性来减少此默认数字。
  3. 铁榜样例:

    var list = this.querySelector("iron-list");
    list._physicalCount = 4; // default is 20
    

答案 1 :(得分:1)

实际上,最好对已知的固定长度项目数组使用dom-repeat模板,特别是较短长度的项目数组。因此,在我上面的例子中,铁列表被误用(至少是为了它的预期目的)。请参阅相关的GitHub问题和建议:

https://github.com/PolymerElements/iron-list/issues/68