I've done as follow by using iron-list
and iron-scroll-threshold
in order to implement infinite-scrolling in polymer. But problem is loadMoreData for iron-scroll-threshold
is never executed after first list scrolling is end in polymer. Please help me which one is missing or wrong in my code. Thanks.
<template>
<iron-ajax id="ajax"
url="https://randomuser.me/api/"
handle-as="json"
params='{"results": 20}'
loading="{{loadingPeople}}"
on-response="categoriesLoaded">
</iron-ajax>
<app-toolbar>
<div main-title>Load data using iron-scroll-threshold</div>
</app-toolbar>
<iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold">
<iron-list id="list" items="[[categoriesJobs]]" as="person" scroll-target="threshold">
<template>
<div>
<div class="personItem" tabindex$="[[tabIndex]]">
<iron-image class="avatar" sizing="contain" src="[[person.picture.medium]]"></iron-image>
<div class="pad">
<div class="primary">[[person.name.first]] [[person.name.last]]</div>
<address>
[[person.location.street]] [[person.city]] <br />
[[person.location.city]], [[person.location.state]] [[person.location.postcode]]
</address>
</div>
</div>
</div>
</template>
</iron-list>
</iron-scroll-threshold>
</template>
<script>
Polymer({
is: 'job-category',
attached: function () {
this.companyDetail = [];
this.categoriesJobs = [];
},
loadMoreData: function () {
this.$.ajax.generateRequest();
},
categoriesLoaded: function (e) {
var people = e.detail.response.results;
this.categoriesJobs = people;
this.$.threshold.clearTriggers();
}
});
</script>
</dom-module>
The problem is with
iron-list
, from the docs:There you can find different ways to do that, but below you can see a working example. In this example I also fixed the
categoriesLoaded
function so it would load more data not just replace the old one.JSBin example
I also include the code here: