Ionic如何实现下拉刷新与上拉加载功能

Ionic如何实现下拉刷新与上拉加载功能

IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 javascript MVVM 框架和 Angularjs 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

本文给大家介绍 Ioinc中怎么实现 下拉刷新和上拉加载功能的。在项目开发中经常遇到此功能，感兴趣的朋友一起看看吧。

HTML部分

{{message.static?message.content:message.content.substr(, )}}

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.getMesYqkUUrQsages({perPage: vm.pagination.perPage, http://page: vm.pagination.currentPage}, function (data) {

vm.http://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如何实现下拉刷新与上拉加载的相关内容就给大家介绍完了，希望对大家有所帮助，如果大家想了解更多内容敬请关注我们网站！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。