ionic1开发之上拉加载使用小结

在ionic1中，上拉加载的组件为ion-infinite-scroll。

当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。通俗易懂的说法就是当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。--详情参看文档--

一般上拉加载都是用在列表上面，列表的显示肯定就要对应一个相应的数据数组items，上拉加载肯定就会有页码pageIndex。

---

列表页数据首次加载

1. 整个页面就只有一个列表
   这种情景是最简单的，当我们首次进入页面，items是一个空数组，也就是说这个时候列表的高度是为零的，所以上拉加载的控件是会出现在页面顶部的。此时就会触发on-infinite事件，在on-infinite事件中向服务器发起请求获取数据并把数据添加到items数组中。
2. 页面上有多个列表
   关于一个页面有多个列表的做法可以用tabs+slideBox的方式来实现。在情景之中，我们想要的效果应该是首次进入页面的时候只加载能够看到的那个列表的数据，其他列表被选中之后才开始加载数据，而不是一进入页面就把所有列表的数据加载出来。
   此时，我们HTML页面的的代码结构应该大概是这样的
   
   
   
   
   list1
   
   ng-if="list1.hasMore"
   on-infinite="list1.loadMoreData()">
   
   
   
   
   
   list2
   
   ng-if="list2.hasMore"
   on-infinite="list2.loadMoreData()">
   
   
   
   
   
   tab1
   tab2
   
   
   代码说明：
   1.imc-tabs和imc-tab是自定义的一个类ion-tabs的组件，具体可参看ionic1开发之嵌套tabs；
   2.此时是有两个列表，对应有两个上拉加载组件，各个列表有各自的items、pageIndex，并且还多了一个参数hasMore。hasMore初始化赋值为false，当我们首次进入页面时让第一个加载的列表的hasMore=true，上拉加载ng-if="list.hasMore"开始进行数据的请求与加载。其他列表在选中之后才让hasMore=true，这样就实现了列表没有出现的时候就不去请求数据了。

注意：在得到服务器的相应之后，无论是成功还是失败的相应，一定要记得使用$scope.$broadcast('scroll.infiniteScrollComplete')来结束此次上拉加载。

---

上拉加载无限加载

上拉加载出现无限在的情况，一般都是没有在合适的时机去掉上拉加载组件。

1. 当服务器返回的数据为空时
   服务器返回的数据为空了，就表示在当前页服务器已经没有数据了，此时也就不能再进行上拉加载的操作了；
2. 上一次加载的数据不足以撑起一屏时
   列表做分页一般都会有两个参数，一个是页码pageIndex，一个是每页最大显示条数pageSize。当获取到的数据小于pageSize的时候也就表示下一页不会有数据了，此时也不能再进行上拉加载的操作了；
3. 当服务器返回错误或者网络请求错误的时候
   此时表示获取当前页的数据失败，当前页的数据都没有获取到，肯定就不能去获取下一页的数据了。

tip：1和2可以合为一个判断，判断服务器是否还有下一页的数据，这个可以是服务器直接给个是否有下一页的参数，也可以在前端代码中通过pageIndex*pageSize

---

下拉刷新

在列表页一般都会同时使用下拉刷新和上拉加载两个组件。

tip：下拉刷新的过程中，最好是在获取到服务器数据之后才清空之前的数据，然后再让pageIndex加1。如果在获取到数据之前就清空数据，可能会导致上拉加载组件出现在页面上并执行上拉加载的事件。