Работа с большим файлом JSON с железом-ajax, железным списком и загрузкой через порог прокрутки железа

Question

Я пытаюсь загрузить большой файл JSON в мое представление, которое имеет более 1000 элементов, и я бы хотел, чтобы вид импортировался только 20 за раз. Каждый раз, когда я использую iron-list, он отображает только 3 объекта, пока я не изменю размер окна, а затем сразу загружу все элементы в json.

Любая идея, как я могу отображать 20 элементов первой, а затем, когда я прокручиваю нижнюю часть, я получаю больше предметов?

Спасибо.

<dom-module id="fetch"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
     paper-card{ 
     margin-bottom: 1em; 
     padding: 1em; 
     } 
    </style> 
    <h2>Hello [[prop1]]</h2> 
    <content class="horizontal"> 
     <paper-material> 
      <iron-ajax 
       auto 
       url="/some.json" 
       handle-as="json" 
       last-response="{{ajaxResponse}}" 
       debounce-duration="300"></iron-ajax> 

<iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold"> 
     <iron-list items="[[ajaxResponse]]" scroll-target="threshold"> 
      <template> 
      <paper-card> 
       <div id="card-content"> 
       <h4>User:{{item.val}}</h4> 
       <h4>{{item.val2}}</h4> 
       </div> 
       <div class="card-action"> 
       <paper-button>Icon</paper-button> 
       <paper-button>Like</paper-button> 
       <paper-fab>Open</paper-fab> 
       </div> 
      </paper-card> 
      </template> 
     </iron-list> 
     </iron-scroll-threshold> 
     </paper-material> 
    </content> 
    </template> 

    <script> 

    Polymer({ 
     is: 'fetch', 

     properties: { 
     prop1: { 
      type: String, 
      value: 'fetch' 
     }, 
     } 
    }); 
    </script> 
</dom-module> 

Answer 1

Я полагаю, что контейнер (<content class="horizintal>) вашего iron-list не имеет явного размера, которые могут вызвать проблемы.

Согласно docs

Важно: железо-лист должен быть либо явно размера, или делегировать прокрутки к родителю явно размера. Под «явным размером» мы имеем , либо он имеет явное свойство высоты CSS, заданное с помощью класса или встроенного стиля, либо же его размер другими средствами компоновки (например, гибкими или подходящими классами).

в качестве альтернативы вы можете запустить событие изменения размера при установке данных:

document.querySelector('iron-list').fire('iron-resize');