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如何实现下拉刷新与上拉加载的相关内容就给大家介绍完了，希望对大家有所帮助，如果大家想了解更多内容敬请关注脚本之家网站！
您可能感兴趣的文章: