iron-page上的iron-scroll-threshold

Question

我遇到了使用iron-scroll-threshold以及iron-page的問題，它與其他頁面共享相同的主機。

我的應用程序UI上有paper-tabs。隨着選項卡的變化，頁面會被延遲加載。其中一個頁面包含來自端點的大量AJAX數據，因此我必須在其上實現滾動分頁。

我的問題是，我試圖讓iron-scroll-threshold在該特定頁面（與其他頁面共享相同的dom滾動）觸發。我知道我可以考慮使用iron-list，頁面的高度很明確，但我不想因爲它會自動添加兩個overflow而破壞我的應用的用戶體驗。

我的問題是，每當我到達特定iron-page的底部時，我該如何觸發on-lower-threshold？我試圖通過以下方式與dom-repeat一起使用它。

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

我面對的另一個問題是它會在ajax調用完成之前自動觸發事件。之後，即使dom已經加載，它也不會再次發射。

如果你不清楚，你可以問我更具體的問題。新年快樂的人們！

Answer 1

您的<iron-scroll-threshold>.scrollTarget設置應該被移除，因爲在這種情況下<iron-scroll-threshold>本身就是滾動目標。

您可以創建一個包含<iron-scroll-threshold>作爲項容器的自定義頁面元素。確保將其高度設置爲100%。

<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