Wie erstellt man unendliche Scroll in Polymer 2.0?

Question

Wie erstellt man unendliche Scroll in Polymer 2.0? Ich habe eine Eisen-Ajax-Anforderung, als i-Daten in dom-Repeat drücken

<iron-ajax id='show_news' last-response="{{data1}}" content-type="application/json" method="POST" auto url="http://1ss6.sss.197.80:7777/news" 
     on-response="create_news" body='{"news_type":"news", "round":"1"}'></iron-ajax> 
     <div style=" margin: 0 auto;" class="container flex-wrap"> 

      <template is="dom-repeat" items="{{data1}}"> 

       <style is="custom-style"> 

       </style> 
        <paper-card style="max-width: 600px; margin: 1em; overflow: hidden;" alt="mma2day"> 
        <div class="card-content"> 
         <iron-image style="" alt="The Polymer logo." src="http://188.166.26.223:3334/static/[[item.img]]" placeholder="/images/lazy.png" ></iron-image> 
         <div class="cafe-header">[[item.head]] 

         </div> 
         <div class="cafe-rating" style="color: #C00000; font-weight: bold;"> 
         <!-- <iron-icon class="star" icon="star"></iron-icon> 
         <iron-icon class="star" icon="star"></iron-icon> 
         <iron-icon class="star" icon="star"></iron-icon> 
         <iron-icon class="star" icon="star"></iron-icon> 
         <iron-icon class="star" icon="star"></iron-icon> --> 
         [[_sampleOutput(item.insert_date)]] 

         </div> 
         <div class="cafe-location cafe-light"> 
         <span style="color: #C00000; font-weight: bold;">[[item.site]]</span> 

         </div> 
        <!-- <p>[[item.head]]</p> 
         <p class="cafe-light">Small plates, salads &amp; sandwiches in an intimate setting with 12 indoor seats plus patio seating.</p> --> 
        </div> 

        </paper-card> 
      </template> 

Was soll ich als nächstes tun? Wie zu verstehen, dass ich am Ende der Liste bin und ajax.request ausführen?

Answer 1

Sie müssen einen Schwellenwert definieren mit iron-scroll-threshold Element.

In Ihrem Fall wäre es so etwas wie diese:

<iron-scroll-threshold on-lower-threshold="loadMoreData"> 
    <template is="dom-repeat" items="{{data1}}"> 
     ... 
    </template> 
</iron-scroll-threshold> 

Und dann js:

loadMoreData: function() { 
    this.$.show_news.generateRequest(); 
}