|
Ionic提供了非常簡單的指令來實現(xiàn)下拉刷新。首先，我們需要在列表前加一個
|
|
<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() }; }) |
這里我們實現(xiàn)上面標簽里的doRefresh來更新數(shù)據(jù)，注意，在數(shù)據(jù)更新完成后要$broadcast廣播一個scroll.refreshComplete的事件，這個事件是讓ion-refresher知道刷新已經(jīng)完成，可以隱藏自己了。
|
