Onsen UI - faul Wiederholung mit zwei Säulen Artikel

Question

Ich habe diese Vorlage

 <ons-row> 
     <ons-col width="22%" class="card" ons-lazy-repeat="SimilarDelegate"><!--ng-repeat="item in similarResults"--> 
      <img ng-src="{{item .thumb}}" class="thumbnail" ng-click="showQuickInfo(item .id)" err-src="img/noimage.jpg" /> 
      <ons-row> 
       <ons-col width="75%">{{item .name}}<br><ons-icon icon="md-star" size="22px"></ons-icon> {{item .rating}}</ons-col> 
      </ons-row> 
     </ons-col> 
    </ons-row> 

Mit ng-repeat meine Artikel in einer zweispaltigen Zeile wiedergegeben werden (jede Zeile hat zwei Artikel). Aber meine Liste kann bis zu 16000 Artikel und ng-repeat 'Leistung ist nicht so gut, selbst mit 300 Artikeln. Ich habe den Code geändert, um ons-lazy-repeat zu verwenden, und die Ladeleistung ist jetzt mehr als gut! aber jede Reihe hat jetzt nur noch einen Gegenstand statt zwei. Ich habe versucht, es in jeder Reihe zwei Dinge zu machen, aber noch nichts. Gibt es einen Weg für ons-lazy-repeat, um das zu erreichen?

Dank

Answer 1

ons-lazy-repeat funktioniert nur für vertikale Wiederholungen.

Während ng-repeat nur mehr Elemente, also im Grunde lädt es alles, faul Wiederholung hat eine maximale Anzahl von Elementen, die es anzeigt. Wenn Sie also 1000 Elemente nach unten scrollen, haben Sie immer noch nur 100 Elemente im DOM zur gleichen Zeit. Sich also an komplexere Dinge zu erinnern, wie die DOM-Elemente positioniert würden, wenn sie existieren würden, wird zu etwas Komplexem. Daher unterstützt ons-lazy-repeat nur vertikale Wiederholungen. Deshalb haben Sie wahrscheinlich bemerkt, dass es erforderlich ist, die Höhe des wiederholten Elements zu kennen. Im Grunde genommen können Sie die Dinge nicht so wiederholen, wie Sie es beschreiben. Es gibt jedoch noch relativ einfache Möglichkeiten, um das gewünschte Ergebnis zu erzielen.

Hier sind die zwei Lösungen, die mir in den Sinn kommen:

• einfachste Lösung, um die ons-lazy-repeat Richtlinie für das Element nur haben, die diese zwei Elemente enthalten. Dann wird alles gut. So sollte ons-lazy-repeat verwendet werden.

• Die zweite ist eine Art von Hacky und ich würde es nicht wirklich empfehlen, aber manche Leute mögen diese Dinge. Grundsätzlich sollten Sie in der Lage sein, das ons-lazy-repeat zu betrügen, indem Sie ihm falsche Werte geben und einige css-Hacks machen.

  Zum Beispiel können sagen, dass Sie

  .item { height: 100px; width: 50%; } 
  .item:nth-child(even) { margin-top: -100px; margin-left: 50%; } 
  

  Und Ihre Höhenfunktion zurückkehren können 50 statt 100. Es besteht auch die Möglichkeit, dass einige dieser Stile !important erfordern, da die lazy-repeat möglicherweise einige Inline-Stile hinzufügen.

  CSS Hacks herrschen wieder vor.

Aber immer noch würde ich die erste Lösung empfehlen.