一、预热知识
1、<ion-infinite-scoll></ion-infinite-scoll>
详情参考菜鸟教程:http://www.runoob.com/ionic/ionic-scroll.html
2、ng-if
详情参考菜鸟教程:http://www.runoob.com/angularjs/ng-ng-if.html
二、步骤(只关注ion-infinite-scoll)
1、在你的数据展示后面加一个<ion-infinite-scoll></ion-infinite-scoll> 。
属性介绍:
①on-infinite: 指定自动加载的函数(当满足预备知识里说的条件就执行,存在多次执行的可能)。
②ng-if :控制on-infinite加载次数的这样一个开关,当它为false时,这个<ion-infinite-scoll>就被移除了。
③distance:从底部滚动到触发on-infinite表达式的距离,默认:1%。
它的作用就是用户把页面拉到底部就自动去调on-infinite属性指定的函数。即拉到数据底部就去执行一个叫loadMore()的函数。
2、angularjs部分(在一个controller中)
①本demo是一个招聘信息的展示。每次从后台查15条数据到前台展示,利用一个叫pageId的控制页数,初始值为1,每调一次函数页数加一,并执行后面的$http()服务,从后台查一次数据。(可以不用管)
②查出的response数据的控制台打印显示是object,利用object的result属性获得该集合对象。
③把查出的对象集合遍历,加入到$scope的一个叫recruitments(招聘信息)的属性中,用于前台展示数据。
④设置的一个开关,因为一次显示15条数据,当加载到150条数据时,即把domore这个开关设为true。进而通过前台页面 ng-if="!domore"为false,删除了<ion-infinite-scroll>。通过删除标签,终止了上拉刷新的功能。
⑤$scope.$broadcast('scroll.infiniteScollComplete''). (获取数据刷新页面的意思)
⑥注意:获取的数据为什么不直接这样写呢 $scope.recruitments = response.result;
因为这样写有两个问题,第一,当再次调用这个loadMore()函数时,原来的数据会被直接覆盖。第二,当覆盖的那一瞬间,页面没有
数据出现空白,于是函数loadMore()会被一直调用。解决方法就是,把新的数据加到原数据的后面,于是就有了下面的写法。
其中,response的具体内容是一个Object(里面的result属性是一个数组装了15个具体对象)
三、展示效果
1.初始页面,因为页面是未被数据充满(下面空白了一片),自动去执行一次domore()函数,加载出数据,填满筛选栏下面的空白。
(注意:竖直方向有空白,<ion-infinite-scoll>这个标签是会执行函数的)
2.加载。 每当你拉到页面底部时,自动执行一次domore(),直到数据为150条,进入开关,删除掉自动该标签。
四、总结
上面说了一大堆,关键就两个知识。利用 <ion-infinite-scoll>实现自动加载,利用ng-if这个控制自动加载。