collection-repeat

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

collection-repeat可以显示大量信息的列表,比ng-repeat更高的性能。

它只会渲染可见的DOM对象。

在手机屏幕上仅渲染与当前滚动位置匹配的8个项目.

基础

  • 给予collection-repeat的数据必须是一个数组。
  • 如果未设置item-heightitem-width属性,其它列表项将以第一个列表项作为参考。
  • 不要使用angular(::)一次性绑定collection-repeat。 滚动Scope范围内的每个项目都会分配新数据,并在滚动时重新更新。 绑定需要更新,而一次性绑定不会。

性能技巧

  • 当切换出<img src>属性时,iOS webview具有性能瓶颈。 要提高iOS上图片的效果,请提前缓存图片,并尽可能降低唯一图片的数量。 我们正在开发一个解决方案

实例该文档来自ionic中文网ionic-china

基本项目列表 (codepen)

<ion-content>
  <ion-item collection-repeat="item in items">
    {{item}}
  </ion-item>
</ion-content>

栅格图像列表 (codepen)

<ion-content>
  <img collection-repeat="photo in photos"
    item-width="33%"
    item-height="200px"
    ng-src="{{photo.url}}">
</ion-content>

水平滚动,动态项宽 (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="">
    </div>
  </ion-scroll>
</ion-content>

API

属性 类型 说明
collection-repeat expression

如何枚举集合的表达式。格式为variable in expression其中variable是用户定义的循环变量,expression是将集合赋给枚举的作用域表达式。例如:album in artist.albumsalbum in artist.albums | orderBy:'name'

item-width
(可空)
expression

重复元素的宽度。 表达式必须返回数字(像素)或百分比。 默认为列表中第一个项目的宽度。 (以前的命名是collection-item-width)

item-height
(可空)
expression

重复元素的高度。 表达式必须返回数字(像素)或百分比。 默认为列表中第一个项目的高度。 (以前的命名是collection-item-height)

item-render-buffer
(可空)
number

列表中的可见项目前后预加载的项目数。 默认3.提示:如果您有大量要预加载的图片,可以将此设置得更高。但不要将其设置得太高,否则会有性能问题。

force-refresh-images
(可空)
boolean

强制滚动时刷新图片。 这样修复了一个问题,当一个元素交换滚动,它的图像将仍然有旧的src,而新的src将被加载。 将此设置为true会损失小额性能。