您的位置:首页 > 其它

ionic 下拉刷新 上拉加载更多

2017-03-28 17:04 274 查看
1、HTML

<ion-pane>
<ion-content>
<!--下拉刷新-->
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
</ion-list>
<!--上拉加载更多-->
<ion-infinite-scroll ng-if="hasMore()" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>
</ion-pane>
2、controller
appControllers.controller('RefreshCtrl', function ($scope, $timeout, $http) {
$scope.hasValue = true;
$scope.pageIndex = 1;
$scope.items = [
{ "id": 1, "name": "C#" },
{ "id": 2, "name": "C++" },
{ "id": 3, "name": ".Net" },
{ "id": 4, "name": "Android" },
{ "id": 5, "name": "Ios" },
{ "id": 6, "name": "HTML5" },
{ "id": 7, "name": "JavaScript" },
{ "id": 8, "name": "Css3" },
{ "id": 9, "name": "Ionic" },
{ "id": 10, "name": "AngularJS" },
{ "id": 11, "name": "Php" },
{ "id": 12, "name": "Java" },
{ "id": 13, "name": "C" },
{ "id": 14, "name": "SQL Server" },
{ "id": 15, "name": "Flash" },
{ "id": 16, "name": "MongoDB" }
];

$scope.doRefresh = function () {
console.log("ion-refresher");
/*
$http.get('http://www.shouce.ren/try/demo_source/item.json')//注意改为自己本站的地址,不然会有跨域问题
.success(function (newItems) {
$scope.items = newItems;
})
.finally(function () {
$scope.$broadcast('scroll.refreshComplete');
});
*/
$scope.items = [
{ "name": "菜鸟教程" },
{ "name": "www.runoob.com" }
];
$scope.$broadcast('scroll.refreshComplete');
};

$scope.hasMore = function () {
return $scope.hasValue;
}

$scope.loadMore = function () {
console.log("ion-infinite-scroll");
var moreData = [
{ "id": 17, "name": "电子商务" + $scope.pageIndex },
{ "id": 18, "name": "互联网" + $scope.pageIndex },
{ "id": 19, "name": "交通" + $scope.pageIndex },
{ "id": 20, "name": "教育" + $scope.pageIndex }
];
$scope.items = $scope.items.concat(moreData);
if ($scope.pageIndex > 5) {
$scope.hasValue = false;
}
$scope.pageIndex++;
$scope.$broadcast('scroll.infiniteScrollComplete');
}
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息