ionic上拉刷新功能的demo

一、预热知识

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这个控制自动加载。