最新版本号[免费下载]

collection-repeat

作者:本站编辑 发布时间:2015-11-24 来源:本站原创 点击数:

该指令只渲染屏幕可见区域的列表。因此如果你有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表达式

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


本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友
上一篇文章:$ionicListDelegate
下一篇文章:ion-option-button
AI智能听书
选取音色