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

原创 2015年11月19日 16:21:09

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

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

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

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会重复请求
            });


【无限滚动加载数据】—infinite-scroll插件的使用

网上对于infinite-scroll插件使用的例子不多。但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式。 官网上有对infinite-scroll的详细描述,但一...
  • yongjian1092
  • yongjian1092
  • 2013年05月14日 22:12
  • 68934

Ionic上拉刷新下拉加载更多

//控制器、FinancList服务  $ionicListDelegate(list控制器)   $timeout定时器 .controller('FriendsCtrl', function($...
  • u011448427
  • u011448427
  • 2015年02月26日 14:03
  • 13350

解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题或禁止第一次加载

ionic 中一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数;当然,主要会导致首次调用的时候,会执行几次加载更多的函数; ...
  • Lpandeng
  • Lpandeng
  • 2017年02月21日 14:52
  • 3288

better-scroll的那些坑

对于better-scroll,可以看下better-scroll介绍,或者当better-scroll遇见vue。better-scroll的第一个坑 可以看下这个better-scroll排坑。...
  • primadonna_w
  • primadonna_w
  • 2017年10月25日 14:06
  • 465

better-scroll实现下拉刷新、上拉加载更多(巨简单...)

1、废话少说,先看看移动端的列表页面 (1)正常浏览 (2)下拉刷新中 (3)下拉刷新结束 (4) 上拉加载 (5)上拉 加载中 2、上述基本上就是一整套移动端列表的刷...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2017年04月29日 16:27
  • 12739

ionic 下拉刷新时触发上拉加载事件的解决办法

不知为何我的项目使用 ion-refresher 和 ion-infinite-scroll的时候,出现了每次下拉刷新的时候,都会多次触发上拉加载控件的事件研究小半天最后终于找到了解决办法:如果ion...
  • leishi8819
  • leishi8819
  • 2016年08月17日 13:00
  • 3614

vue muit-ui infinite-scroll源码解析

infinite scroll基本使用vue的mint-ui的infinite scroll的基本使用地址:infinite-scroll接入指南. 简单解释一下: 1、指令接受的method:处...
  • u010014658
  • u010014658
  • 2017年05月22日 19:24
  • 4371

内容:.content和.scroll-content

ionic预定义了两个内容容器样式: .content - 流式定位,内容元素在文档流中按顺序定位 .scroll-content - 绝对定位,内容元素占满整个屏幕 这两种样式都可以使用...
  • u014377853
  • u014377853
  • 2016年04月06日 19:16
  • 1266

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

在第一次自动调用时,如果加载的数据没有充满屏幕,会自动再调用一次,要是还没充满屏幕,会无限次请求数据。 解决办法就是多请求点数据。...
  • u014491931
  • u014491931
  • 2015年11月27日 14:40
  • 353

sui mobile无限滚动时会触发多次请求问题处理

sui mobile 无限滚动时触发多次请求的问题处理
  • kinjoe_whan
  • kinjoe_whan
  • 2016年12月27日 09:57
  • 2313
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ionic 上拉刷新 ion-infinite-scroll 自动调用多次问题解决
举报原因:
原因补充:

(最多只允许输入30个字)