在第一個列表結尾以聚合物形式結束後，永遠不會執行鐵滾動閾值

Question

爲了在聚合物中實現無限滾動，我通過使用iron-list和iron-scroll-threshold完成了以下操作。但問題是loadMoreData iron-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> 

Answer 1

問題是與iron-list，從docs：

鐵列表必須是明確的大小，或委託滾動到一個明確的大小父...

有你可以找到不同的方式來做到這一點，但在下面你可以看到一個工作的例子。在這個例子中，我還修復了categoriesLoaded函數，所以它會加載更多的數據，而不僅僅是替換舊數據。

JSBin example

我還包括這裏的代碼：

<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>