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.
<script>
ons.bootstrap()
.controller('MyController', function($scope) {
$scope.MyDelegate = {
countItems: function() {
// Return number of items.
return 1000000;
},
calculateItemHeight: function(index) {
// Return the height of an item in pixels.
return 45;
},
configureItemScope: function(index, itemScope) {
// Initialize scope
itemScope.item = 'Item #' + (index + 1);
},
destroyItemScope: function(index, itemScope) {
// Optional method that is called when an item is unloaded.
console.log('Destroyed item with index: ' + index);
}
};
});
</script>
<ons-list ng-controller="MyController">
<ons-list-item ons-lazy-repeat="MyDelegate">
{{ item }}
</ons-list-item>
</ons-list>See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.
| Name | Type Default Value |
Description |
|---|---|---|
| ons-lazy-repeat | Expression | A delegate object, can be either an object attached to the scope (when using AngularJS) or a normal JavaScript variable. Optional |