Ionic如何實現下拉刷新與上拉加載功能

IONIC 是目前最有潛力的一款HTML5 手機應用開發框架。通過SASS 構建應用程序，它提供了很多UI 組件來幫助開發者開發強大的應用。 它使用JavaScript MVVM 框架和AngularJS 來增強應用。提供數據的雙向綁定，使用它成為Web 和移動開發者的共同選擇。 Ionic是一個專注於用WEB開發技術，基於HTML5創建類似於手機平台原生應用的一個開發框架。 Ionic框架的目的是從web的角度開發手機應用，基於PhoneGap的編譯平台，可以實現編譯成各個平台的應用程序。

本文給大家介紹Ioinc中怎麼實現下拉刷新和上拉加載功能的。在項目開發中經常遇到此功能，感興趣的朋友一起看看吧。

HTML部分

<ion-view view-title="消息通知"><ion-content> <!-- <ion-refresher> 下拉刷新指令--><ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher><div ng-repeat="message in vm.messages" ><div>{{message.title}}<i ng-click="vm.show(message)" ng-class="message.static?'ion-arrow-down-b':'ion-arrow-right-b'"></i></div><div><div>{{message.static?message.content:message.content.substr(, )}}</div></div></div><!-- ion-infinite-scroll 上拉加載數據指令distance默認% nf-if的值為false時，就禁止執行on-infinite --><ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="%" ></ion-infinite-scroll></ion-content></ion-view>

JS部分

• on-refresh 下拉觸發的函數函數執行結束之前必須廣播下該事件結束$scope.$broadcast('scroll.refreshComplete');

• on-infinite 上拉觸發的函數同樣需要廣播事件結束$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顯示的數據，pagination是做分頁加載顯示的參數，service是我封裝的$http服務，show方法是view信息顯示的開關（這些都可以不用注意）！

關於小編給大家介紹的Ionic如何實現下拉刷新與上拉加載的相關內容就給大家介紹完了，希望對大家有所幫助，如果大家想了解更多內容敬請關注武林網網站！