# bi.collection_view

## 视图集合,高性能容器,可处理大集合，事先需要知道每一个视图的宽度、高度位置等信息 基类[BI.Widget](/core/widget.md)

{% method %}
[source](https://jsfiddle.net/fineui/cmq0b3v0/)

{% common %}
```javascript

BI.createWidget({
  type: "bi.collection_view",
  element:"#wrapper",
  width: 400,
  height: 300,
  items: [],
  cellSizeAndPositionGetter: function (index) {
      return {
          x: index % 10 * 50,
          y: Math.floor(index / 10) * 50,
          width: 50,
          height: 50
      }
  }
});



```

{% endmethod %}

## API
##### 基础属性
| 参数    | 说明           | 类型  | 可选值 | 默认值
| :------ |:-------------  | :-----| :----|:----
| items | 子组件数组 | array |  — | [ ] |
| overflowX | 是否显示横向滚动条| boolean | true,false | true |
| overflowY | 是否显示纵向滚动条 | boolean | true,false | true |
| cellSizeAndPositionGetter | 设置每个单元格的位置坐标和宽高 | function|— | — |
| horizontalOverscanSize | 横向超出可视范围区域预加载的数量 | number | — | 0 |
| verticalOverscanSize | 纵向超出可视范围区域预加载的数量 | number | — | 0 |
| width | 行宽，必设 |number| — | —  |
| height | 列宽，必设 | number | —| — |
| scrollLeft | 滚动条相对于左边的偏移 | number | — | 0 |
| scrollTop |  滚动条相对于顶部的偏移 | number | — | 0 |


## 对外方法
| 名称     | 说明                           |  回调参数     
| :------ |:-------------                  | :-----   
| setScrollLeft | 设置滚动条相对于左边的偏移 | scrollLeft|
| setScrollTop | 设置滚动条相对于顶部的偏移 | scrollTop |
| setOverflowX | 设置是否显示横向滚动条 | b |
| setOverflowY | 设置是否显示横向滚动条 | b|
| getScrollLeft | 获取滚动条相对于左边的偏移 | —|
| getScrollTop | 获取滚动条相对于顶部的偏移 | — |
| getMaxScrollLeft | 获取滚动条相对于左边的最大偏移 | — |
| getMaxScrollTop | 获取滚动条相对于顶部的最大偏移 |—|
| restore | 还原列表设置 | — |
| populate | 刷新列表 | items |


## 事件
| 事件     | 说明                           |  回调参数 |
| :------ |:------------- |:------------------------|
|BI.CollectionView.EVENT_SCROLL|    滚动时触发的事件 | {scrollLeft: scrollLeft, scrollTop: scrollTop} |

---