[英]Handling large JSON file with iron-ajax, iron-list and loading via iron-scroll-threshold
I'm trying to load a large JSON file into my view which has over 1000 items and I would like the view to import only 20 at a time. 我正在尝试将大型JSON文件加载到具有1000多个项目的视图中,并且希望该视图一次仅导入20个。 Everytime I use
iron-list
it only renders 3 items until I resize the window and then loads all the items in the json at once. 每次我使用
iron-list
它只会渲染3个项目,直到我调整窗口大小,然后一次将所有项目加载到json中。
Any idea how I can render 20 items first and then as I scroll to the bottom, I get more items? 知道如何先渲染20个项目,然后滚动到底部时,我会得到更多的项目吗?
Thanks. 谢谢。
<dom-module id="fetch">
<template>
<style>
:host {
display: block;
}
paper-card{
margin-bottom: 1em;
padding: 1em;
}
</style>
<h2>Hello [[prop1]]</h2>
<content class="horizontal">
<paper-material>
<iron-ajax
auto
url="/some.json"
handle-as="json"
last-response="{{ajaxResponse}}"
debounce-duration="300"></iron-ajax>
<iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold">
<iron-list items="[[ajaxResponse]]" scroll-target="threshold">
<template>
<paper-card>
<div id="card-content">
<h4>User:{{item.val}}</h4>
<h4>{{item.val2}}</h4>
</div>
<div class="card-action">
<paper-button>Icon</paper-button>
<paper-button>Like</paper-button>
<paper-fab>Open</paper-fab>
</div>
</paper-card>
</template>
</iron-list>
</iron-scroll-threshold>
</paper-material>
</content>
</template>
<script>
Polymer({
is: 'fetch',
properties: {
prop1: {
type: String,
value: 'fetch'
},
}
});
</script>
</dom-module>
I assume that the container ( <content class="horizintal>
) of your iron-list
does not have an explicit size, which can cause issues. 我假设您的
iron-list
的容器( <content class="horizintal>
)没有显式的大小,这可能会引起问题。
Important: iron-list must either be explicitly sized, or delegate scrolling to an explicitly sized parent.
重要说明:Iron-list必须要么具有明确的大小,要么委托滚动到具有明确大小的父项。 By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style, or else is sized by other layout means (eg the flex or fit classes).
“显式调整大小”是指它要么通过类或内联样式设置了显式的CSS height属性,要么通过其他布局方式(例如flex或fit类)进行调整。
alternatively you can fire a resize event when you set the data: 或者,您可以在设置数据时触发调整大小事件:
document.querySelector('iron-list').fire('iron-resize');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.