Eisen-Scroll-Schwelle auf einer Eisen-Seite

Question

Ich habe Probleme mit iron-scroll-threshold zusammen mit einer iron-page, die den gleichen Host wie andere Seiten teilt.

Meine Anwendung UI hat paper-tabs an der Spitze. Seiten werden träge geladen, wenn sich die Registerkarten ändern. Eine der Seiten enthält eine große Menge an AJAX-Daten von einem Endpunkt, so dass ich Scroll-Paginierung darauf implementieren muss.

Mein Problem ist, ich versuche, iron-scroll-threshold in dieser bestimmten Seite (die gleiche Dom Scroll wie andere Seiten teilt) zu feuern. Ich weiß, dass ich iron-list mit einer expliziten Höhe für die Seite in Betracht ziehen kann, aber ich will nicht, da es die UX meiner App bricht, indem automatisch zwei overflow hinzugefügt werden.

Meine Frage ist, wie feuere ich on-lower-threshold immer wenn ich den Boden eines bestimmten iron-page erreichen? Ich habe versucht, es mit dom-repeat zu verwenden, indem ich folge.

<iron-scroll-threshold 
      lower-threshold="100" 
      on-lower-threshold="loadMoreData" 
      scroll-target="itemlist" 
      > 
     <template is="dom-repeat" items="[[data]]" as="list" id="itemlist"> 
     <a href="[[list.id]]"> 
      <p>[[list.name]]</p> 
     </a> 
     </template> 
    </iron-scroll-threshold> 

Ein anderes Problem, das ich gegenüberstelle, ist es feuert automatisch das Ereignis, bevor der Ajax-Anruf abgeschlossen ist. Danach, auch wenn die Dom geladen hat, hat es nie wieder gefeuert.

Sie können mir genauere Fragen stellen, wenn Sie nicht klar sind. Frohes neues Jahr!

Answer 1

Ihre <iron-scroll-threshold>.scrollTarget Einstellung sollte entfernt werden, da in diesem Fall die <iron-scroll-threshold> selbst das Scroll-Ziel ist.

Sie könnten ein benutzerdefiniertes Seitenelement erstellen, das <iron-scroll-threshold> als Elementcontainer enthält. Stellen Sie sicher, dass die Höhe auf 100% eingestellt ist.

<dom-module id="x-page"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     height: 100%; 
     } 
     iron-scroll-threshold { 
     height: 100%; 
     overflow: auto; 
     } 
    </style> 
    <iron-scroll-threshold lower-threshold="100" 
          on-lower-threshold="_loadMoreData"> 
     <template is="dom-repeat" items="[[items]]"> 
     <div>[[index]]: [[item]]</div> 
     </template> 
    </iron-scroll-threshold> 
    </template> 
</dom-module> 

codepen