ionic实现上拉加载更多(组件 ion-infinite-scroll使用,以及多次加载的问题)

前端之家收集整理的这篇文章主要介绍了ionic实现上拉加载更多(组件 ion-infinite-scroll使用,以及多次加载的问题)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

  1. <ion-view view-title="{{i18n.org_member_info_label}}">
  2. <ion-content>
  3. <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)">
  4. <p ng-bind="item.realName" class="input-label w25p"></p>
  5. <p ng-bind="item.workType"></p>
  6. <i class="icon ion-ios-arrow-right icon-pos-right"></i>
  7. </div>
  8. <ion-infinite-scroll on-infinite="table.query()" distance="2%" ng-if="table.isLoadMore" immediate-check="false"></ion-infinite-scroll>
  9. </ion-content>
  10. </ion-view>
  1. $scope.table = {
  2. ths: CONFIG.project.orgTeamHead,trs: [],isLoadMore: true,currentPage: 0,maxPage: 1,/**
  3. * @ngdoc method
  4. * @name orgInfoCtrl#table.query
  5. * @methodOf table.query
  6. * @return {undefined}
  7. * @description Get members in this organization by workerContractList api.
  8. * */
  9. query() {
  10. this.currentPage += 1;
  11. if(this.currentPage > this.maxPage){
  12. this.isLoadMore = false;
  13. return;
  14. }
  15. apiService.getWorkerContractList({
  16. sid: $scope.userInfo.sid,team_id: data.id,request_status: $scope.i18n.request_status_complete_label,flag: 1,page: this.currentPage,limit: $scope.limit
  17. });
  18. },/**
  19. * @ngdoc method
  20. * @name orgInfoCtrl#table.dealData
  21. * @methodOf table.dealData
  22. * @param {Object} data - Server response.
  23. * @return {Undefined}
  24. * @description Handle response from server.
  25. * */
  26. dealData(data) {
  27. this.maxPage = Math.ceil(data.count / $scope.limit);
  28. $scope.table.trs = _.concat($scope.table.trs,data);
  29. this.isLoadMore = result.length >= $scope.limit;
  30. $timeout(() => {
  31. $scope.$broadcast("scroll.infiniteScrollComplete");
  32. });
  33. }
  34. };
  35. $scope.$on('stateChangeSuccess',function() {
  36. $scope.table.query()
  37. });

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

猜你在找的Angularjs相关文章