菜鸟笔记-AngularJS 整合下拉刷新infinite-scroll框架

1 首先去下载infinite-scroll

下载地址：https://codeload.github.com/sroze/ngInfiniteScroll/zip/master

直接加入

<script src="infinite-scroll2.js"></script> 

第一个报错 ：

Uncaught SyntaxError: Unexpected reserved word

暂时理解为引入外部模块，暂时不了解报错原因，直接删除

第二个报错：

 Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

let 必须在严格模式才能运行，在最前面加上 "use strict";解决

第三个报错：

Uncaught SyntaxError: Unexpected reserved word

模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出，

理解为输出这个模块变量 ，直接删除

第四个报错：

Uncaught Error: [$injector:modulerr] Failed to instantiate module jkdapp due to:
Error: [$injector:modulerr] Failed to instantiate module  due to:

Error: [$injector:nomod] Module '' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

看翻译是实例模块化失败，确保指定依赖项

 var app = angular.module("jkdapp", ['infinite-scroll']);

指定依赖项。

第五个错误

页面上无限加载加载

原因：给列表指定了高度，并且设置了显示滚动条

比如：height:300px;overflow: auto;  

使数据无法铺满屏幕，就会使数据无限加载

删除列表高度

第六错误：

首次加载没有铺满屏幕

原因：1 不是http请求的数据

            2实数据的第二次请求之后数据形成的列表高度没有超过屏幕高度

比如：data=[1,2] 最后列表高度<屏幕高度

并不会自动铺满屏幕

最后代码

html:

        <div class="detail_list">
            <ul class="s-container-s" infinite-scroll='loadMore()' infinite-scroll-distance='0' infinite-scroll-disabled="busy">
                <li ng-repeat="obj in items">
                    <div>
                        <span> {{obj.name}}</span>
                    </div>
                </li>


            </ul>
        </div>

js:

          var app = angular.module("app", ['infinite-scroll']);
            app.config(['$locationProvider', function ($locationProvider) {
                // $locationProvider.html5Mode(true);
                $locationProvider.html5Mode({
                    enabled: true,
                    requireBase: false
                });
            }]);
 
        


            app.controller('detailsctrl', function ($scope, $location, $http) {
           
                // 当前页数
                $scope.currentPage = 0;
                // 总页数
                $scope.totalPages = 100000;
                // 防止重复加载
                $scope.busy = false;
                // 存放数据
                $scope.items = [];
                // 请求数据方法
                $scope.loadMore = function () {
                    if ($scope.currentPage < $scope.totalPages) {
                        $scope.currentPage++;
                        if ($scope.busy) {
                            return false;
                        }
                        $scope.busy = true;


                        $http({
                            method: 'GET',
                            url: 'url',
                            params: {
                                par:par
                                pageIndex: $scope.currentPage,
                                pageSize: 12
                            }
                        }).then(function successCallback(response) {


                            var data = response.data;
                            $scope.busy = false;
                            //组织数据
                            for (var i in data.list) {
                                $scope.items.push(data.list[i]);
                            }
                            $scope.totalPages = data.totalPages;


                        });
                    };
                }


                $scope.loadMore();

            });

效果如下：

可以自动铺满整个屏幕

demo上传至git:

https://download.****.net/download/qq_25744257/10463323