zoukankan      html  css  js  c++  java
  • 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();
  • 相关阅读:
    014、BOM与DOM对象的应用
    013、BOM对象的应用
    001.JS特效
    开发技巧
    AndroidStudio中使用SVN
    AndroidStudio碰到的各种问题
    Activity的生命周期和启动模式
    03.Java多线程并发库API使用2
    php的memcache和memcached扩展区别
    js:关于IE6/7下new Date(值)输出为NaN的解决方案
  • 原文地址:https://www.cnblogs.com/yuanye0918/p/7200811.html
Copyright © 2011-2022 走看看