Ionic(ionicframework)一款接近原生的Html5移动App开发框架 创建精彩的应用 从这里开始 -collection-repeat
漂亮的界面 追求性能 专注原生 免费开源
collection-repeat
collection-repeat
是一个允许你渲染数千项列表,并且性能几乎不会减弱的指令。
示例:
该指令只渲染屏幕可见区域的列表。因此如果你有1000条列表项目,只有10条呈现在你的屏幕上, collection-repeat 只会渲染当前滚动位置的十条DOM。
当使用collection-repeat时,请记住一下几点:
- collection-repeat处理的数据必须是一个数组。
- 你必须明确的告诉该指令,在DOM中你的项使用是多大的指令属性。允许像素值或百分百(见下文)。
- 被渲染的元素将被绝对定位:确保你的CSS正常运行(见下文)。
- 保持重复的HTML元素尽可能的简单。当用户向下滚动时,元素会被延迟渲染。因此,你的元素越复杂,在用户滚动的过程中按需编译就越会导致“卡屏”。
- 在屏幕的每一行,你渲染的元素越多,滚动就越可能变慢。建议列表元素的栅格保持在3列以内。例如,如果你有一个图库只需把它们的宽度设置为33%。
- 每个 collection-repeat列表都会占据它的所有父滚动视图的空间。如果你想在一个页面上有多个列表,就把每个列表放在它自己的 ionScroll容器内。
- 你不应该在带有collection-repeat列表的ion-content或ion-scroll元素上使用ng-show 和 ng-hide指令。 ng-show 和 ng-hide 在内容样式上应用 css规则
display: none
,导致可见滚动视图内容的宽度和高度为0。因此,collection-repeat会渲染刚刚被取消隐藏的元素。
用法
基本用法(单行项)
注意两点:我们用 ng-style来设置项的高度以匹配我们的重复项的高度。此外, 我们添加了一个css规则使我们的item拉伸以适应全屏(因为它是绝对定位的)。
<ion-content ng-controller="ContentCtrl">
<div class="list">
<div class="item my-item"
collection-repeat="item in items"
collection-item-width="'100%'"
collection-item-height="getItemHeight(item, $index)"
ng-style="{height: getItemHeight(item, $index)}">
{{item}}
</div>
</div>
</div>
function ContentCtrl($scope) {
$scope.items = [];
for (var i = 0; i < 1000; i++) {
$scope.items.push('Item ' + i);
}
$scope.getItemHeight = function(item, index) {
//使索引项平均都有10px高,例如
return (index % 2) === 0 ? 50 : 60;
};
}
.my-item {
left: 0;
right: 0;
}
栅格用法(每行三项)
<ion-content>
<div class="item item-avatar my-image-item"
collection-repeat="image in images"
collection-item-width="'33%'"
collection-item-height="'33%'">
<img ng-src="">
</div>
</ion-content>
.my-image-item {
height: 33%;
width: 33%;
}
API
属性 | 类型 | 详情 |
---|---|---|
collection-repeat |
表达式
|
该表达式表明如何枚举一个集合。当前支持一下格式:
|
collection-item-width |
表达式
|
重复元素的宽度。可以是一个数字(以像素为单位)或一个百分百。 |
collection-item-height |
表达式
|
重复元素的高度。可以是一个数字(以像素为单位)或一个百分百。 |