我已经使用以下方法完成了iron-list
and iron-scroll-threshold
为了在聚合物中实现无限滚动。但问题是 loadMoreDatairon-scroll-threshold
在聚合物中第一个列表滚动结束后永远不会执行。请帮助我的代码中缺少或错误的一项。谢谢。
<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>
问题在于iron-list
, 来自docs https://elements.polymer-project.org/elements/iron-list:
iron-list 必须明确调整大小,或者将滚动委托给明确调整大小的父级......
在那里您可以找到不同的方法来做到这一点,但下面您可以看到一个有效的示例。在这个例子中我还修复了categoriesLoaded
函数,因此它会加载更多数据,而不仅仅是替换旧数据。
JSBin 示例 http://jsbin.com/turecox/edit?html,console,output
我还在这里添加了代码:
<dom-module id="test-app">
<template>
<style>
:host {
}
app-toolbar {
height: 64px;
background-color: grey;
}
iron-list {
flex: 1 1 auto;
}
.container {
height: calc(100vh - 64px);
display: flex;
flex-direction: column;
}
</style>
<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>
<div class="container">
<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>
</div>
</template>
<script>
Polymer({
is: 'test-app',
attached: function() {
this.companyDetail = [];
this.categoriesJobs = [];
},
loadMoreData: function () {
console.log('load more data');
this.$.ajax.generateRequest();
},
categoriesLoaded: function (e) {
var self = this;
var people = e.detail.response.results;
people.forEach(function(element) {
self.push('categoriesJobs', element);
});
this.$.threshold.clearTriggers();
}
});
</script>
</dom-module>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)