|
Ionic提供了非常简单的指令来实现下拉刷新。首先，我们需要在列表前加一个
|
|
<body ng-app="ionicApp"> <ion-header-bar class="bar-energized"> <h1 class="title">Pull to Refresh!</h1> </ion-header-bar> <ion-content ng-controller="TodosCtrl"> <ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()"> </ion-refresher> <ion-list> <ion-item ng-repeat="todo in todos">{{todo.name}}</ion-item> </ion-list> </ion-content> </body> |
我们可以定义下拉刷新时显示的字体，以及对应的操作，这里是调用doRefresh();
下面我们看一下js里面怎么控制
|
|
var app = angular.module('ionicApp', ['ionic']) app.controller('TodosCtrl', function($scope) { $scope.todos = [ {name: "Do the dishes"}, {name: "Take out the trash"} ] $scope.doRefresh = function() { $scope.todos.unshift({name: 'Incoming todo ' + Date.now()}) $scope.$broadcast('scroll.refreshComplete'); $scope.$apply() }; }) |
这里我们实现上面标签里的doRefresh来更新数据，注意，在数据更新完成后要$broadcast广播一个scroll.refreshComplete的事件，这个事件是让ion-refresher知道刷新已经完成，可以隐藏自己了。
|
