collection-repeat

See the Pen by Ionic (@ionic) on CodePen.

collection-repeat 是一个允许你渲染数千项列表,并且性能几乎不会减弱的指令。

示例:

该指令只渲染屏幕可见区域的列表。因此如果你有1000条列表项目,只有10条呈现在你的屏幕上, collection-repeat 只会渲染当前滚动位置的十条DOM。

当使用collection-repeat时,请记住一下几点:

  1. collection-repeat处理的数据必须是一个数组。
  2. 你必须明确的告诉该指令,在DOM中你的项使用是多大的指令属性。允许像素值或百分百(见下文)。
  3. 被渲染的元素将被绝对定位:确保你的CSS正常运行(见下文)。
  4. 保持重复的HTML元素尽可能的简单。当用户向下滚动时,元素会被延迟渲染。因此,你的元素越复杂,在用户滚动的过程中按需编译就越会导致“卡屏”。
  5. 在屏幕的每一行,你渲染的元素越多,滚动就越可能变慢。建议列表元素的栅格保持在3列以内。例如,如果你有一个图库只需把它们的宽度设置为33%。
  6. 每个 collection-repeat列表都会占据它的所有父滚动视图的空间。如果你想在一个页面上有多个列表,就把每个列表放在它自己的 ionScroll容器内。
  7. 你不应该在带有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 表达式

该表达式表明如何枚举一个集合。当前支持一下格式:

  • 变量表达式 – 其中变量是用户定义的循环变量,表达式是一个给出了集合进行枚举的范围表达式。

    比如: album in artist.albums

  • 通过tracking_expression跟踪表达式变量 – 你也可以提供一个可选的跟踪功能可以将集合中的对象与DOM元素关联起来。如果没有指定跟踪功能,collection-repeat通过在集合中标识来关联元素。用一个以上的跟踪功能来解决同一个问题是错误的。(这意味着两个不同的对象被映射到同一个DOM元素上,那样是不行的。)过滤器应被应用到表达式,特定跟踪表达式之前。

    比如: item in items等同于'item in items track by $id(item)'。 这意味着DOM元素会被数组中标识的项关联。

    比如: item in items track by $id(item)。在数组的每一项中一个内置的 $id()函数可以被用来分配一个唯一的 $$hashKey属性。然后这个属性作为一个关联DOM元素的关键,通过标识数组中的相应的项。在数组中移动同一个项与在DOM中移动DOM元素的方式一样。

    比如: 当数据来自数据库时,item in items track by item.id是一个典型的模式。在这种情况下,对象标识并不重要。重要两个对象的id属性相同,那么它们被认为是等效的。

    比如: item in items | filter:searchText track by item.id是一种模式,可用来在项上应用一个过滤器,与一个跟踪表达式相结合。

collection-item-width 表达式

重复元素的宽度。可以是一个数字(以像素为单位)或一个百分百。

collection-item-height 表达式

重复元素的高度。可以是一个数字(以像素为单位)或一个百分百。