解决ionic和angular上拉加载的问题

 更新时间:2017年08月03日 09:13:31   作者:WangPanJu  
这篇文章主要介绍了解决ionic和angular上拉加载的问题,需要的朋友可以参考下

说到ionic上拉加载就跟pc的分页是一样的,他需要在html数据列表的最下面边添加

<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%"> 
</ion-infinite-scroll> 

当列表为空 当ng-if为true的时候, 列表没有被填充满的时候 ,他就会自动加载loadMore();

<span style="font-size:18px;">      $scope.loadMore = function() { 
      Msdk.postJSON('/informNotice/queryNoticeInfo', { 
          pageIndex: $scope.newsList.pageIndex, 
          pageSize: $scope.newsList.pageSize, 
          informIds: $scope.newsList.informIds 
        }, 
        function(e) { 
          if(e.length != 0) { 
            //把每次请求到的数据都拼接起来 
            var a = $scope.notice; 
            $scope.notice = a.concat(e); 
            console.log($scope.notice); 
            //广播上个加载结束,有条件进行下个加载 
            $scope.$broadcast('scroll.infiniteScrollComplete');             $scope.newsList.pageIndex++;</span> 
<span style="font-size:18px;">                        //如果请求到的数据小于pageSize,证明没数据可读</span> 

<span style="font-size:18px;"><span style="white-space:pre">            </span>//hasmore变为false,不会执行上拉加载 
            if(e.length < $scope.newsList.pageSize) { 
              $scope.hasmore = false; 
            } else {</span> 
[javascript] view plain copy
<span style="font-size:18px;"><span style="white-space:pre">              </span>//为true有条件进行下次上拉加载 
              $scope.hasmore = true; 
            } 
          } else { 
            $scope.hasmore = false; 
            $scope.$broadcast('scroll.infiniteScrollComplete'); 
          } 
        }) 
    }</span> 

总结

以上所述是小编给大家介绍的解决ionic和angular上拉加载的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • AngularJS表单和输入验证实例

    AngularJS表单和输入验证实例

    本篇文章详细的介绍了AngularJS表单和输入验证实例, AngularJS表单可以提供验证功能。有需要的可以了解一下。
    2016-11-11
  • 从 Angular Route 中提前获取数据的方法详解

    从 Angular Route 中提前获取数据的方法详解

    这篇文章主要介绍了从 Angular Route 中提前获取数据,通过本文,你将学会使用 resolver, 在 Angular App 中应用 resolver,应用到一个公共的预加载导航,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • angularJs中orderBy筛选以及filter过滤数据的方法

    angularJs中orderBy筛选以及filter过滤数据的方法

    今天小编就为大家分享一篇angularJs中orderBy筛选以及filter过滤数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 总结十个Angular.js由浅入深的面试问题

    总结十个Angular.js由浅入深的面试问题

    这篇文章虽然只有10个问题,但是覆盖了angular开发中的各个方面,有基本的知识点,也有在开发过程中遇见的问题,同时也有较为开放性的问题去辨别面试者的基础水准和项目经验,注意答案仅供参考哦~
    2016-08-08
  • 详解Angular.js的$q.defer()服务异步处理

    详解Angular.js的$q.defer()服务异步处理

    相信大家都知道jquery和angular都有defer服务,这篇文章暂以angular为例谈谈个人的理解,在文章的最后并附上jquery的阮一峰总结的defer。有需要的朋友们也可以参考借鉴,下面来一起学习学习吧。
    2016-11-11
  • AngularJS动态添加数据并删除的实例

    AngularJS动态添加数据并删除的实例

    下面小编就为大家分享一篇AngularJS动态添加数据并删除的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • AngularJS自定义过滤器用法经典实例总结

    AngularJS自定义过滤器用法经典实例总结

    这篇文章主要介绍了AngularJS自定义过滤器用法,结合实例形式总结分析了AngularJS自定义过滤器进行包含、替换、筛选、过滤、排序等操作相关实现技巧与注意事项,需要的朋友可以参考下
    2018-05-05
  • Angular2监听页面大小变化的解决方法

    Angular2监听页面大小变化的解决方法

    这篇文章主要介绍了Angular2监听页面大小变化的解决方法,需要的朋友可以参考下
    2017-10-10
  • AngularJS入门教程之REST和定制服务详解

    AngularJS入门教程之REST和定制服务详解

    本文主要讲解 AngularJS REST和定制服务的知识,这里帮大家整理了相关知识,并附示例代码,详细讲解了RES和定制服务的知识,有兴趣的小伙伴可以参考下
    2016-08-08
  • 使用Angular CLI快速创建Angular项目的一些基本概念和写法小结

    使用Angular CLI快速创建Angular项目的一些基本概念和写法小结

    这篇文章主要介绍了使用Angular CLI快速创建Angular项目的一些基本概念和写法小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论