登录  /  注册
首页 > web前端 > js教程 > 正文

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

巴扎黑
发布: 2017-08-13 14:42:03
原创
1355人浏览过

这篇文章主要介绍了解决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(&#39;/informNotice/queryNoticeInfo&#39;, { 
          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(&#39;scroll.infiniteScrollComplete&#39;);             $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(&#39;scroll.infiniteScrollComplete&#39;); 
          } 
        }) 
    }</span>
登录后复制

以上就是ionic和angular上拉加载问题的解决方案的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号