angular 列表无限滚动加载

1、页面中引入ng-infinite-scroll.js 文件；

2、在HTML中，

<div infinite-scroll="myListFunction()" infinite-scroll-disabled="InfiniteLoading" infinite-scroll-distance="1"></div>

  其中：

　　infinite-scroll:需要执行的函数；

　　infinite-scroll-disabled: 值为TRUE时，表示不再重复加载，FALSE为加载

　　infinite-scroll-distance：表达式或者数字，这个值默认是0，即当元素滚动到元素底部达到浏览器窗口（滚动区域）底部时，执行滚动区域里面的函数

　　infinite-scroll-immediate-check：布尔值，用于标志指令在初始化页面时，是否为初始执行一次（即使这种情况下，没有初始滚动）

　　infinite-scroll-listen-for-event ：一个事件，当接受到这个事件时候，会重新执行滚动函数，重新定位滚动位置，比如到元素被修改时，会重新执行滚动函数

 

注意：infinite-scroll-immediate-check没有设置时，页面在加载的时候会自己调用一次，首次进入页面的时候，函数会执行两次。可自己手动控制是否加载

 　　　　　　　　$scope.InfiniteLoading = true; //因为会自己调用一次函数，所以首次进入页面时禁止滚动调用，然后根据结果判断是否继续加载数据
                commonService.home.GetHomeData({
                    PageIndex: pageIndex,
                    PageSize: pageSize,
                    ProvinceName: "",
                    Id:$scope.HomeId
                }).then(function (response) {
                    if(response.data.Result){
                        var listArr=response.data.Data.RetValue[0];
                        if(listArr){
                            if (pageIndex > 1) {
                                $scope.ListInfo.Data = $scope.ListInfo.Data.concat(response.data.Data.RetValue[0].Data);
                            }else
                            {
                                $scope.ListInfo.Data = response.data.Data.RetValue[0].Data;
                            }

                            if (listArr.Data.length<pageSize) {
                                $scope.InfiniteLoading = true;
                                return;
                            }else{
                                $scope.InfiniteLoading = false;
                            }
                            if(listArr.Data.length==pageSize){
                                pageIndex++;
                            }
                        }
                    }
                });

 

转载于:https://www.cnblogs.com/taokele/p/8778353.html