[英]Handling large JSON file with iron-ajax, iron-list and loading via iron-scroll-threshold
我正在尝试将大型JSON文件加载到具有1000多个项目的视图中,并且希望该视图一次仅导入20个。 每次我使用iron-list
它只会渲染3个项目,直到我调整窗口大小,然后一次将所有项目加载到json中。
知道如何先渲染20个项目,然后滚动到底部时,我会得到更多的项目吗?
谢谢。
<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>
我假设您的iron-list
的容器( <content class="horizintal>
)没有显式的大小,这可能会引起问题。
根据文档
重要说明:Iron-list必须要么具有明确的大小,要么委托滚动到具有明确大小的父项。 “显式调整大小”是指它要么通过类或内联样式设置了显式的CSS height属性,要么通过其他布局方式(例如flex或fit类)进行调整。
或者,您可以在设置数据时触发调整大小事件:
document.querySelector('iron-list').fire('iron-resize');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.