collection-repeat
позволяет приложению отображать списки, содержащие огромное количество пунктов. При этом действует более эффективно, чем ng-repeat
.
В DOM передаются только те пункты, которые видны в данный момент.
Это означает, что на экране телефона, где могут уместиться только восемь пунктов списка, будут в данном виде отображения видны восемь пунктов списка (без применения прокрутки).
Основы:
- Данные, передающиеся в collection-repeat, должны представлять собой массив.
- Если не предоставляются атрибуты
item-height
иitem-width
, будет сделано допущение, что каждый пункт в списке имеет точно такие же размеры, как и самый первый его пункт. - Не используйте с collection-repeat одноразовую привязку Angular (
::
). По мере прокрутки области видимости каждого пункта из списка присваиваются новые данные, и происходит процесс переклассификации. Привязки нуждаются в обновлениях, а одноразовым привязкам обновление не нужно.
Возможности повышения производительности:
- Узкое место производительности веб-представления в iOS наблюдается при отключении атрибутов
<img src>
.
Чтобы увеличить эффективность работы с изображениями в iOS, заранее поместите изображения в кэш и, если возможно, уменьшите число уникальных изображений.
Usage
Basic Item List (codepen)
<ion-content>
<ion-item collection-repeat="item in items">
{{item}}
</ion-item>
</ion-content>
Grid of Images (codepen)
<ion-content>
<img collection-repeat="photo in photos"
item-width="33%"
item-height="200px"
ng-src="{{photo.url}}">
</ion-content>
Horizontal Scroller, Dynamic Item Width (codepen)
<ion-content>
<h2>Available Kittens:</h2>
<ion-scroll direction="x" class="available-scroller">
<div class="photo" collection-repeat="photo in main.photos"
item-height="250" item-width="photo.width + 30">
<img ng-src="{{photo.src}}">
</div>
</ion-scroll>
</ion-content>
API
Атрибут |
Тип |
Описание |
collection-repeat |
|
Выражение, показывающее как нумеровать коллекцию, по формату |
item-width (необязательный) |
|
Ширина повторяемого элемента. Выражение должно возвращать число (пикселей) или проценты. По умолчанию задается точно такая же ширина, как у первого пункта в списке. (ранее это называлось collection-item-width) |
item-height (необязательный) |
|
Высота повторяемого элемента. Выражение должно возвращать число (пикселей) или проценты. По умолчанию задается точно такая же высота, как у первого пункта в списке. (ранее это называлось collection-item-height) |
item-render-buffer (необязательный) |
|
Число пунктов, которые нужно загрузить до и после видимых пунктов в списке. По умолчанию: 3. Подсказка: если у вас много изображений для предварительной загрузки, задайте число побольше, но не слишком большое, иначе начнется потеря производительности. |
force-refresh-images (необязательный) |
|
Заставляет изображения обновляться, когда вы осуществляете прокрутку. Это решает проблему там, где элемент взаимно заменяется при скроллинге: изображение все равно имеет старый scr в то время, как загружается новый scr. Установка значения на true приводит к небольшой потере производительности. |