ionic 上拉加载更多

一、html文件中:

 <ion-infinite-scroll ng-if="action.moreDataCanBeLoaded()" on-infinite="action.loadMore()" distance="15%"></ion-infinite-scroll>

 二、controller中

        var message = {
            page: 0,
            pageno: 1
        };


        //定义数据
        $scope.data = {
            hasMoreDataCanBeLoaded: false,

            //接口返回值的初始化
            messageList: []     // 获取消息类别下的消息列表接口
        };

        $scope.action.moreDataCanBeLoaded = function () {
            return $scope.data.hasMoreDataCanBeLoaded;
        };

        // 上拉加载更多
        $scope.action.loadMore = function () {

            message.page++;
            getMessageList();

        };

       // ======获取消息类别下的消息列表接口========
        function getMessageList() {
            var urlParam = {
                action: 'categories',
                id: pageId,
                page: message.page,
                page_no: message.pageno
            };
            ResourceFactory.Message.get(urlParam).$promise.then(
               //成功回调
                function (indata) {
                           
                    if (!!indata && indata.hasOwnProperty("data") && indata.data.length > 0) {

                        if (indata.data.length < message.pageno) {
                            $scope.data.hasMoreDataCanBeLoaded = false;
                        } else {
                            $scope.data.hasMoreDataCanBeLoaded = true;
                        }
                        //合并数组(新数据合并到老数据中)
                        $scope.data.messageList.push.apply($scope.data.messageList, indata.data);

                        console.log('接口返回成功'+ angular.toJson($scope.data.messageList));
                    } else {
                        $scope.data.hasMoreDataCanBeLoaded = false;
                    }
                }, 
               //失败回调
                function (rejection) {

                    console.log('接口返回失败,失败数据' + angular.toJson(rejection));

                }).finally(function () {
                $scope.$broadcast('scroll.infiniteScrollComplete');        //停止广播
            });
        }


        getMessageList();

 

posted on 2017-07-18 15:43  嘿呀土豆  阅读(268)  评论(0编辑  收藏  举报

导航