Onsen UI - lazy repeat using two column items



  • I have this template

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

    Using ng-repeat my items are rendered in a two column row (each row has two items). But my list can go up to 16000 items and ng-repeat’ performance is not that good even with 300 items. I changed the code to use ons-lazy-repeat and the loading performance is now more than fine! but each row now has only one item instead of two. I’ve been trying to make it two items each row but nothing yet. Is there a way for ons-lazy-repeat to accomplish that?

    Thanks


Log in to reply