订单下拉刷新和上拉加载

订单下拉刷新和上拉加载

1. 找到订单最外层页面 tabs.html 包括：首页-订单-设置
   找到“订单”

<ion-tab title="订单" icon-off="ion-ios-speedometer-outline" icon-on="ion-ios-speedometer" href="#/tab/orderlist">
	<ion-nav-view name="tab-orderlist"></ion-nav-view>
</ion-tab>

1. 创建订单下所包含的页面 tab-orderlist.html加载订单包括下拉刷新和上拉加载

2. 下拉刷新：ion-refresher
   使用指令ion-refresher可以为滚动容器（ion-scroll或ion-content）增加 拉动刷新/pull-to-refresh的功能：

<ion-refresher on-refresh="doRefresh()" pulling-text="下拉刷新..." refreshing-icon="ion-load-a">
</ion-refresher>

把它作为ionContent 或 ionScroll元素的第一个子元素。

注意在刷新完毕后，应当使用作用域的$broadcast()方法通知框架：
当刷新完成时，从你的控制器中广播（$broadcast）出 ‘scroll.refreshComplete’事件。

on-refresh=”doRefresh()”

当用户向下拉动足够的距离并松开时，执行此表达式
当用户下拉到一定程度然后开始刷新时触发。

找到 orderlistCtrl：

$scope.doRefresh = function() {
       param.page = 1;//加载1页
       getList(param);//请求列表（传入参数）
   }

创建的参数param:

var param = {		
	verify:$window.localStorage['verify'], //身份验证
	user_id:$window.localStorage['user_id'], 
	page: 1 //传入页数
   };

pulling-text=”下拉刷新…”

当用户下拉时显示的文字。

4.上拉加载更多

<ion-infinite-scroll ng-if="isLoadMore" on-infinite="loadMore()" class="carShar-loadMore" >
   </ion-infinite-scroll>

当没有更多数据加载时，就可以用一个简单的方法阻止无限滚动 ng-if=”isLoadMore”

$scope.isLoadMore = true;

//广播消息，通知上推加载更多的代码执行完毕
$scope.$broadcast(‘scroll.infiniteScrollComplete’);

$scope.$broadcast(“scoll.refreshComplete”);