关闭

ionic 上拉刷新 ion-infinite-scroll 自动调用多次问题解决

13138人阅读 评论(0) 收藏 举报
分类:

这个问题查了很久,终于明白如何在上拉时为什么会自动调用多次

在第一次自动调用时,如果加载的数据没有充满屏幕,会自动再调用一次,要是还没充满屏幕,会无限次请求数据,官方里面也没说明这个东西,被坑了好长时间。

如果你不想多次跟后台交互,就定义请求的条目多点。

html:

<ion-content class="ranktitcontent">
    <ion-list>
      <div class=" row rankcontentbox" ng-repeat="item in items">
          <div class="col col-25 txtcenter"><label ng-bind="$index+1">1</label></div>
          <div class="col col-25 txtcenter"><label ng-bind="item.Name | limitTo:4">11111/label></div>
          <div class="col col-25 txtcenter"><label ng-bind="item.TuiJianNumber">5</label></div>
          <div class="col col-25 txtcenter "><label ng-bind="item.BuyPrice | number">100</label></div>
      </div>
    </ion-list>
    <ion-infinite-scroll ng-if="!domore"   on-infinite="doRefresh()" distance="10%" ></ion-infinite-scroll>
</ion-content>

js:

$scope.domore = false;
        $scope.PageIndex = 0;
        $scope.PageSize = 6;
        $scope.userId = window.localStorage.getItem('userId');
        $scope.items = [];
$scope.doRefresh = function () {
            $scope.PageIndex++;
            var timer = null;

            var param = {
                method: "get",
                url: "/Agent/GetPerformance",
                params: { PageIndex: $scope.PageIndex, PageSize: $scope.PageSize, UserId: $scope.userId }
            }
            serviceRequest.query(param) // 同步调用,获得承诺接口  
            .then(function (data) {  // 调用承诺API获取数据 .resolve  
                if (data.result) {
                   
                    if (data.data) {
                        if (data.data.AgentPerformance.length !== 0) {
                            for (var i = 0; i < data.data.AgentPerformance.length; i++) {
                                $scope.items.push(data.data.AgentPerformance[i]);
                            }

                        }
                        if (data.data.AgentPerformance.length === 0) {
                            $scope.domore = true;
                        }
                        timer = $timeout(function () {
                            $scope.$broadcast('scroll.infiniteScrollComplete');
                        }, 1500);
                    } else {
                        $scope.domore = true;
                        $scope.$broadcast('scroll.infiniteScrollComplete');
                    }
                }

                $scope.$broadcast('scroll.infiniteScrollComplete');
            }, function (data) {  // 处理错误 .reject  
                $timeout.cancel(timer);
            });

            $scope.$on("$destroy", function () {
                //clearTimeout(timer.$$timeoutId);
                $timeout.cancel(timer);
                //清除配置,不然scroll会重复请求
            });


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:72767次
    • 积分:1052
    • 等级:
    • 排名:千里之外
    • 原创:34篇
    • 转载:14篇
    • 译文:0篇
    • 评论:7条
    文章分类
    最新评论