快捷導(dǎo)航

Ionic如何實現(xiàn)下拉刷新與上拉加載功能

更新時間：2016年06月03日 16:06:11 作者：小月博客

在日常項目開發(fā)中我們經(jīng)常見到下拉刷新上拉加載的功能，接下來通過本文給大家介紹ionic如何實現(xiàn)下拉刷新與上拉加載的相關(guān)資料,需要的朋友可以參考下

IONIC 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架。通過 SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。它使用 JavaScript MVVM 框架和 AngularJS 來增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動開發(fā)者的共同選擇。Ionic是一個專注于用WEB開發(fā)技術(shù)，基于HTML5創(chuàng)建類似于手機(jī)平臺原生應(yīng)用的一個開發(fā)框架。Ionic框架的目的是從web的角度開發(fā)手機(jī)應(yīng)用，基于PhoneGap的編譯平臺，可以實現(xiàn)編譯成各個平臺的應(yīng)用程序。

本文給大家介紹 Ioinc中怎么實現(xiàn) 下拉刷新和上拉加載功能的。在項目開發(fā)中經(jīng)常遇到此功能，感興趣的朋友一起看看吧。

HTML部分

<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(, )}}
</div>
</div>
</div>
<!-- ion-infinite-scroll 上拉加載數(shù)據(jù)指令 distance默認(rèn)% nf-if的值為false時，就禁止執(zhí)行on-infinite -->
<ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="%" ></ion-infinite-scroll>
</ion-content>
</ion-view>

JS部分

•　　on-refresh 下拉觸發(fā)的函數(shù) 函數(shù)執(zhí)行結(jié)束之前必須廣播下該事件結(jié)束 $scope.$broadcast(‘scroll.refreshComplete‘);

•　　on-infinite 上拉觸發(fā)的函數(shù) 同樣需要廣播事件結(jié)束 $scope.$broadcast(‘scroll.infiniteScrollComplete‘);

angular.module(‘starter.controllers‘, [])
.controller(‘InfoCtrl‘, function($rootScope, $timeout, $interval, $scope, $http, services) {
var vm = $scope.vm = {
moredata: false,
messages: [],
pagination: {
perPage: ,
currentPage: 
},
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‘);
}, );
},
loadMore: function () {
vm.pagination.currentPage += ;
services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
vm.messages = vm.messages.concat(data);
if (data.length == ) {
vm.moredata = true;
};
$scope.$broadcast(‘scroll.infiniteScrollComplete‘);
})
} 
}
vm.init();
})

此處的messages 是view顯示的數(shù)據(jù)，pagination是做分頁加載顯示的參數(shù)，service是我封裝的$http服務(wù)，show方法是view信息顯示的開關(guān)（這些都可以不用注意）！

關(guān)于小編給大家介紹的Ionic如何實現(xiàn)下拉刷新與上拉加載的相關(guān)內(nèi)容就給大家介紹完了，希望對大家有所幫助，如果大家想了解更多內(nèi)容敬請關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章: