- 概述
该框架提供了很多功能，说说下拉刷新这个功能。
原生的iOS开发都有很好的刷新控件，这中H5的开发这样的控件使用起来还是很简单的。
1:看看html显示代码
<ion-view>
<ion-content>
<ion-refresher
pulling-text="下拉刷新..."
on-refresh="pageContext.doRefresh()">
</ion-refresher>
<div class="test_view" ng-repeat="item in pageContext.testArrys">
{{item}}
</div>
</ion-content>
</ion-view>
html代码.png
很简单吧
看看向下拉的效果
下拉效果.png
2:下来刷新的函数，和及时控制停止刷新控制。
angular.module('invocePlusBX').controller('testViewController', ['$scope', function ($scope) {
var testData = {
testArrys: [],
//下拉刷新函数
doRefresh:function () {
doRefreshMore();
}
};
$scope.pageContext = testData;
initData();
//初始化数据
function initData() {
for (var i=0;i < 3;i++) {
testData.testArrys.push("M"+i);
}
}
//下拉刷新
function doRefreshMore() {
for (var i=0;i < 5;i++) {
testData.testArrys.push("AA:"+i);
}
endRefreshAction();
}
//停止刷新
function endRefreshAction() {
$scope.$broadcast('scroll.refreshComplete');
}
}]);
初始化的函数就是initData()就是给前端标签ng-repeaet赋值显示。
当下拉刷新就要去请求网络，请求的函数就是doRefreshMore ()，这里就要注意了，当请求网络完成的时候，就是停止前端刷新的控制。所以就要控制了。
所以封装了一个停止刷新的函数endRefreshAction ()于是乎就可以随便的使用了。
下一篇：ionic-上拉加载
如有问题可添加我的QQ：1290925041
还可添加QQ群:234812704（洲洲哥学院）
欢迎各位一块学习，提高逼格！
也可以添加洲洲哥的微信公众号
更多消息
更多信iOS开发信息 请以关注洲洲哥 的微信公众号，不定期有干货推送：
这里写图片描述
