ionic 下拉刷新 上拉加载 同时调用导致一次加载多页问题

本文主要解决Ionic1 中 碰到下拉刷新 和 上拉加载 同时调用导致初始化 加载两页或多页的问题

一般情况我们显示一个列表, 默认初始化获取第一页数据, 当判断还有下一页数据时,在通过上啦加载获取下一页

先解决loadMore 默认第一次就加载的问题

ionic 中一个上拉刷新的组件 ion-infinite-scroll，如果页面未填充满页面高度，会自动检测并无限调用多次加载更多的函数；当然，主要会导致首次调用的时候，会执行几次加载更多的函数；

解决方案：

在ion-infinite-scroll标签中，设置immediate-check="false"；这个属性设置了:

是否在页面加载后立刻触发on-infinite的方法，设为false后，则只有滚动到页面边缘时才会触发，即使页面加载出来已经到最底部，不滚动一下的话也是不会触发的,代码如下

<ion-infinite-scroll ng-if="loadMore" immediate-check="false" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>

当在doRefresh中获取数据时

loginService.queryData(pageConfig,function callBack(data){
                if(data.lstDatas && data.lstDatas.length>0){
                    $scope..count = data.iCount;
                    $scope.lstDatas = data.lstDatas;
                    if($scope.lstDatas.length < data.iCount){
                        loadMore = true;//需要加载下一页
                    }else{
                        loadMore = false;
                    }
                }else{
                    console.log("暂无数据");
                    //暂无数据;
                }
                $scope.$broadcast('scroll.refreshComplete');
            });

在上面代码中,发现还会出现加载完第一页接着加载第二页的情况 原因分析是:
页面第一次进来,还有下一页的情况下,直接true,会导致页面没渲染完,自动加载下一页,稍微延迟一点页面渲染完再修改可以避免

    // 延迟500毫秒
	setTimeout(function(){
		loadMore = true;
		console.log("loadMore set true");
	},500);

转载于:https://my.oschina.net/chatcoco/blog/1822724