聚合物核心列表 - 只显示足够的项目来填充视口
Polymer core-list - only show enough items to fill the viewport
我正在试验 core-list。
来自文档:
For performance reasons, not every item in the list is rendered at once; instead a small subset of actual template elements (enough to fill the viewport) are rendered and reused as the user scrolls.
关于属性 'height':
The approximate height of a list item, in pixels. This is used only for determining the number of physical elements to render based on the viewport size of the list. Items themselves may vary in height between each other depending on their data model. There is typically no need to adjust this value unless the average size is much larger or smaller than the default.
所以,如果我有
<core-list style="height: 1000px" height="500"></core-list>
我的列表项高 500 像素,我的列表应显示两个项目。
如果我的列表项高 800 像素,我的列表应该显示一项。
对吗?
不是真的,它会加载一些项目但没有明确的答案是多少。例如,如果您的核心列表的高度为 500,而您的元素的高度为 50,它可能只加载 6 个元素,即使您有 100 个元素。
我试过了,我遇到了一个问题,我想显示 15 个元素,但即使 space 足以显示 15 个元素,它也只显示 11 个。
在我的例子中,我只是调整了列表的高度,以显示足够的元素,以便也显示滚动条。并且当用户滚动时加载其他元素。
我正在试验 core-list。
来自文档:
For performance reasons, not every item in the list is rendered at once; instead a small subset of actual template elements (enough to fill the viewport) are rendered and reused as the user scrolls.
关于属性 'height':
The approximate height of a list item, in pixels. This is used only for determining the number of physical elements to render based on the viewport size of the list. Items themselves may vary in height between each other depending on their data model. There is typically no need to adjust this value unless the average size is much larger or smaller than the default.
所以,如果我有
<core-list style="height: 1000px" height="500"></core-list>
我的列表项高 500 像素,我的列表应显示两个项目。
如果我的列表项高 800 像素,我的列表应该显示一项。
对吗?
不是真的,它会加载一些项目但没有明确的答案是多少。例如,如果您的核心列表的高度为 500,而您的元素的高度为 50,它可能只加载 6 个元素,即使您有 100 个元素。
我试过了,我遇到了一个问题,我想显示 15 个元素,但即使 space 足以显示 15 个元素,它也只显示 11 个。 在我的例子中,我只是调整了列表的高度,以显示足够的元素,以便也显示滚动条。并且当用户滚动时加载其他元素。