ionic1.3.3 下拉刷新 上拉加载更多

源文地址：https://blog.csdn.net/kingcruel/article/details/67638880

再次感谢原作者

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>  

　　

js:

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

　　

转载于:https://www.cnblogs.com/webSong/p/8807327.html