<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Ionic Pull to Refresh</title> <link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" rel="stylesheet"> <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script> </head> <body ng-controller="MyCtrl"> <ion-header-bar class="bar-positive"> <h1 class="title">下拉刷新</h1> </ion-header-bar> <ion-content> <ion-refresher on-refresh="doRefresh()" pulling-text="Pull to refresh..." refreshing-text="Refreshing!" refreshing-icon="ion-loading-c"> </ion-refresher> <ion-list> <ion-item ng-repeat="item in items">{{item}}</ion-item> </ion-list> </ion-content> </body></html>xxxxxxxxxxbody { cursor: url('http://ionicframework.com/img/finger.png'), auto;}angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope, $timeout) { $scope.items = ['Item 1', 'Item 2', 'Item 3']; $scope.doRefresh = function() { console.log('Refreshing!'); $timeout( function() { //simulate async response $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4); //Stop the ion-refresher from spinning $scope.$broadcast('scroll.refreshComplete'); }, 1000); }; });