1.0.7 • Published 7 years ago
infinite-scroll-ng v1.0.7
infinite-scroll
AngularJS 1中使用的大量数据滚动指令
支持
- 浏览器支持Chrome，其他暂未做测试
- 展示数据为树形结构和列表结构
- 非树形结构在Chrome下支持100W条
- 仅支持节点高度相同的树形结构和列表
安装
使用说明
| properties | type | Required | detail | example |
|---|---|---|---|---|
| dataList | Array | yes | 数据列表 | list:$scope.dataList = {id:1,txt:'test'},{id:2,txt:'test2'}， tree:$scope.dataList = [{id:1,txt:'level1',level:0,children:{...}] |
| viewList | Array | yes | 展示列表 | $scope.viewList = [] |
| itemHeight | Number | yes | 单个节点的高度 | 30 |
| toggleHandler | Function | no | 【树形结构】用于展开子节点的方法 | $scope.toggleHandler = new Function(); |
| getChildNodeApi | Function | no | 【树形结构】获取子节点数据的方法 | $scope.getChildNodeApi = function(param){...}; // param的结构{id:id} |
| isGetChildFromApi | String | no | 【树形结构】是否通过方法拉取子节点数据 | 1 |
| isTree | String | no | 【树形结构】是否是属性结构 | 1 |
| propList | Object | no | 【树形结构】需要在每个node节点中绑定的属性 | {id: 'id',fullname: 'txt',level: 'level',parentIds: 'parentIds',isExpand: 'isExpand'} |
| showCount | Number | no | 固定的展示数量 | 100 |
示例【树形结构】
<ul class="pd-l-30" ng-if="orgTree"
data-view-list="viewList1"
data-data-list="orgTree"
data-item-height="30"
data-is-get-child-from-api="1"
data-toggle-handler="toggleHandler"
data-get-child-node-api="getChildNodeApi({id:id})"
data-is-tree="1"
data-prop-map="propMap2"
infinite-scrollbar>
<li class="item-wrapper" ng-repeat="item in viewList1"
ng-click="toggleHandler(item.id)">
<!--TODO 自定义内容-->
</li>
</ul> $scope.treeData = ...;
$scope.viewList2 = [];
$scope.toggleHandler = new Function();
$scope.getChildNodeApi = function (param) {
// TODO 获取子节点
return new Promise(function (resolve, reject) {
let child = [];
// TODO child = 子节点数据
resolve({children: child});
});
}示例【列表结构】
<ul class="pd-l-30" ng-if="listData"
data-view-list="viewList2"
data-data-list="listData"
data-item-height="30"
infinite-scrollbar>
<li class="item-wrapper" ng-repeat="item in viewList2">
<!--TODO 自定义内容-->
</li>
</ul> $scope.listData = ...;
$scope.viewList2 = [];