在日常项目开发中我们经常见到下拉刷新上拉加载的功能，接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
本文给大家介绍 Ioinc中怎么实现 下拉刷新和上拉加载功能的。在项目开发中经常遇到此功能，感兴趣的朋友一起看看吧。
HTML部分
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如何实现下拉刷新与上拉加载的相关内容就给大家介绍完了，希望对大家有所帮助，如果大家想了解更多内容敬请关注html中文网网站！
以上就是Ionic如何实现下拉刷新与上拉加载功能的详细内容，更多请关注0133技术站其它相关文章！
