解决ionic和angular上拉加载的问题
程序员文章站
2022-04-29 07:59:19
说到ionic上拉加载就跟pc的分页是一样的,他需要在html数据列表的最下面边添加
说到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上拉加载的问题,希望对大家有所帮助
上一篇: 简单实现jQuery轮播效果
推荐阅读
-
解决Angular4项目部署到服务器上刷新404的问题
-
vue-scroller实现vue单页面的上拉加载和下拉刷新问题
-
Diycode开源项目实例搭建上拉加载和下拉刷新的Fragment
-
微信小程序 列表的上拉加载和下拉刷新的实现
-
angular+ionic 的app上拉加载更新数据实现方法
-
全网最easy的better-scroll实现上拉加载和下拉刷新
-
解决Angular4项目部署到服务器上刷新404的问题
-
vue-iscroll组件中下拉刷新,上拉加载的问题
-
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
-
解决ionic和angular上拉加载的问题