ionicのドロップダウン・リフレッシュとアップロード
2757 ワード
<ion-view view-title=" ">
<ion-content class="padding">
<!-- <ion-refresher> -->
<ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher>
<div class="list card" ng-repeat="message in vm.messages" >
<div class="item item-divider item-icon-right">{{message.title}}
<i class="icon" ng-click="vm.show(message)" ng-class="message.static?'ion-arrow-down-b':'ion-arrow-right-b'"></i></div>
<div class="item item-body">
<div>
{{message.static?message.content:message.content.substr(0, 40)}}
</div>
</div>
</div>
<!-- ion-infinite-scroll distance 1% nf-if false , on-infinite -->
<ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="1%" ></ion-infinite-scroll>
</ion-content>
</ion-view>
1.on-refreshドロップダウンでトリガーされた関数の実行が終了する前に、イベント終了$scope.$をブロードキャストする必要があります.broadcast('scroll.refreshComplete');
2.on-infiniteでトリガーされた関数も、ブロードキャストイベント終了$scope.$broadcast('scroll.infiniteScrollComplete');
jsコード
angular.module('starter.controllers', [])
.controller('InfoCtrl', function($rootScope, $timeout, $interval, $scope, $http, services) {
var vm = $scope.vm = {
moredata: false,
messages: [],
pagination: {
perPage: 5,
currentPage: 1
},
init: function () {
services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
vm.messages = data;
})
},
show: function (message) {
if (message.static) {
message.static = false;
} else {
message.static = true;
}
},
doRefresh: function () {
$timeout(function () {
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
},
loadMore: function () {
vm.pagination.currentPage += 1;
services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
vm.messages = vm.messages.concat(data);
if (data.length == 0) {
vm.moredata = true;
};
$scope.$broadcast('scroll.infiniteScrollComplete');
})
}
}
vm.init();
})
ここのmessagesはview表示のデータで、paginationはページングロード表示のパラメータで、serviceは私がカプセル化した$httpサービスで、show方法はview情報表示のスイッチです(これらは注意しなくてもいいです)!
分からないことがあったら、質問してもいいですよ.私も初心者で、みんなで一緒に勉強して進歩します!