ionic实现上拉加载更多（组件 ion-infinite-scroll使用，以及多次加载的问题）

最新推荐文章于 2023-08-24 11:06:12 发布

转载最新推荐文章于 2023-08-24 11:06:12 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011460462

文章标签：

#javascript #ViewUI

本文介绍在Ionic项目中实现上拉加载更多功能的具体方法，包括解决多次调用问题及如何正确配置ion-infinite-scroll组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发过程中需要对展示内容实现上拉加载的更多效果，本来以为实现没有什么难度，ionic本身就提供了ion-infinite-scroll组件能够完成我们的开发需要。
先上代码

<ion-view view-title="{{i18n.org_member_info_label}}">
  <ion-content>
      <div ng-repeat="item in table.trs" on-hold="table.touch(item)" class="item item-input-inset" ng-class-odd="'oddRow'" ng-click="showDetail(item)">
        <p ng-bind="item.realName" class="input-label w25p"></p>
        <p ng-bind="item.workType"></p>
        <i class="icon ion-ios-arrow-right icon-pos-right"></i>
      </div>
      <ion-infinite-scroll on-infinite="table.query()" distance="2%" ng-if="table.isLoadMore" immediate-check="false"></ion-infinite-scroll>
  </ion-content>
</ion-view>

  $scope.table = {
      ths: CONFIG.project.orgTeamHead,
      trs: [],
      isLoadMore: true,
      currentPage: 0,
      maxPage: 1,

      /**
       * @ngdoc method
       * @name orgInfoCtrl#table.query
       * @methodOf table.query
       * @return {undefined}
       * @description Get members in this organization by workerContractList api.
       * */
      query() {
        this.currentPage += 1;
        if(this.currentPage > this.maxPage){
          this.isLoadMore = false;
          return;
        }
        apiService.getWorkerContractList({
          sid: $scope.userInfo.sid,
          team_id: data.id,
          request_status: $scope.i18n.request_status_complete_label,
          flag: 1,
          page: this.currentPage,
          limit: $scope.limit
        });
      },

      /**
       * @ngdoc method
       * @name orgInfoCtrl#table.dealData
       * @methodOf table.dealData
       * @param {Object} data - Server response.
       * @return {Undefined}
       * @description Handle response from server.
       * */
      dealData(data) {
        this.maxPage = Math.ceil(data.count / $scope.limit);
        $scope.table.trs = _.concat($scope.table.trs, data);
        this.isLoadMore = result.length >= $scope.limit;
        $timeout(() => {
          $scope.$broadcast("scroll.infiniteScrollComplete");
        });
      }
    };
    
     $scope.$on('stateChangeSuccess', function() {  
      $scope.table.query()
    });

这里我截取了部分项目中的代码来说明实现上拉加载更多的实现，官方文档已经写得很清楚了，这里主要是提一下如何解决多次调用的问题。
1、immediate-check属性判断是否在页面载入后立即检查滚动边界默认为true(这将导致页面载入后立即调用刷新)，如果不设置为false时，可能我们在进入页面后直接调用了多次的加载更多loadMore函数（这里是query函数），设置FALSE后需要我们在进入页面后在stateChangeSuccess中调用加载更多的loadMore函数。
2、这里在处理了数据dealData中，使用了一个定时器。如果不使用这个定时器，虽然数据请求回来了，但是内容还没有充满整个屏幕，这时已经广播$broadcast加载动作已经结束，它就会再自动执行一次或者多次加载，造成数据错误
3、如果我们所有的数据都请求完成，记得设置ng-if=false，控制不在执行上拉加载更多事件
4、ng-repeat可能在手机上调试时，同样出现一次下拉，结果多次调用，这时候用collcection-repeat代替，ng-repeat在渲染页面的时候会触发页面的滚动，导致上拉事件的触发