http://ionicframework.com/docs/api/directive/collectionRepeat/
首先摘录原文:
collection-repeat
collection-repeat
allows an app to show huge lists of items much more performantly thanng-repeat
.
It renders into the DOM only as many items as are currently visible.
This means that on a phone screen that can fit eight items,only the eight items matching the current scroll position will be rendered.
The Basics:
- The data given to collection-repeat must be an array.
- If the
item-height
anditem-width
attributes are not supplied,it will be assumed that every item in the list has the same dimensions as the first item. - Don’t use angular one-time binding (
::
) with collection-repeat. The scope of each item is assigned new data and re-digested as you scroll. Bindings need to update,and one-time bindings won’t.
Performance Tips:
- The iOS webview has a performance bottleneck when switching out
<img src>
attributes. To increase performance of images on iOS,cache your images in advance and,if possible,lower the number of unique images. We’re working ona solution.
Usage
Basic Item List (codepen)
<ion-content>
<ion-item collection-repeat="item in items">
{{item}}
</ion-item>
</ion-content>