ons-lazy-repeat

[OnsenUI]

Using this component a list with millions of items can be rendered without a drop in performance. It does that by “lazily” loading elements into the DOM when they come into view and removing items from the DOM when they are not visible.

Click here to see the original article

[azure313]

Hi, when using ons-lazy-repeat, can I set dynamic height for each ons-list-item?

[shubhanan]

@azure313 yes. Let’s assume your item object has the height attribute. Simple example could be store your item into a array accessible by index, and use that to return the height. E.g. -

 calculateItemHeight: function(index) {
    return storedItems[index].height;
}

This is similar to how I am using it. If your item object doesn’t have height attribute, may be index can lead to finding height via some api call?

 calculateItemHeight: function(index) {
    return //make an api call here with index to find height.
}

As far as I know, returning height dynamically has to be based around index. I’m not sure how to use it directly with the itemScope.item that is in picture at that moment in time. May be others with more knowledge can help me here.

[lezard]

Hi, Im just new to onsen and tried ons-lazy-repeat. is there any way to reset the index to 0 when i call a new GET request url in configureItemScope? I need this because when i tried to paginate on the API request that i called, the key reset to 0.

[IliaSky]

@shubhanan - thank you for your activity. About using the itemScope - linking the height function to that might affect the performance. The current implementation recalculates the heights if the items count changes, however it does not keep the scopes alive for all the items but rather only for the ones visible in the viewport. So to add that functionality it would need to recreate them or at least call the configureItemScope function, which will probably worsen the performance. Overall it’s best if the logic for calculating the dynamic height is as simple as possible.

Still if you have any suggestions for improvements for the API we would be happy to hear them.

@lezard - currently we don’t offer an API for switching the current index. Lazy repeat was made with the user scrolling in mind, not us navigating. We may think about adding it in the future, but I’m not sure if we should encourage users to do that.

If you want you can just manually scroll to the top. Something along the lines of

// Pure JS
document.querySelector('.page__content').scrollTop = document.querySelector('#lazy-list').offsetTop;
// jQuery
$('.page__content').scrollTop($('#lazy-list').offset().top);
$('.page__content').animate({scrollTop: $('#lazy-list').offset().top}, 250);
// Angular
$anchorScroll('lazy-list'); // 1.4.0+
angular.element('.page__content')[0].scrollTop = angular.element('#lazy-list')[0].offsetTop; // earlier versions

This is assuming you have only one page and that the parent of the element with the ons-lazy-repeat attribute has an id lazy-list.