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'); } })