IONIC is currently the most promising HTML5 mobile application development framework. Build applications through SASS, which provides many UI components to help developers develop powerful applications. It uses the JavaScript MVVM framework and AngularJS to enhance applications. Provides two-way binding of data, and using it becomes a common choice for web and mobile developers. Ionic is a development framework that focuses on using WEB development technology and creates native applications similar to mobile phone platforms based on HTML5. The purpose of the Ionic framework is to develop mobile applications from the web perspective. It is based on the compilation platform of PhoneGap, which can be compiled into applications on various platforms.
This article introduces you how to implement the pull-down refresh and pull-up loading functions in Ioinc. This feature is often encountered during project development. Interested friends can take a look.
HTML part
<ion-view view-title="Message Notification"><ion-content> <!-- <ion-refresher> Pull-down refresh command--><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><!-- ion-infinite-scroll pull-up data loading instruction distance When the value of % nf-if is false, the execution of on-infinite --><ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="%" >/ion-infinite-scroll></ion-content></ion-view>JS part
• The function function triggered by the on-refresh pull-down must be broadcasted before the end of the execution of the function function, $scope.$broadcast('scroll.refreshComplete');
• The function triggered by the on-infinite pull-up also needs to end the broadcast event $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();})The messages here are the data displayed by the view, the pagination is the parameter displayed for pagination loading, the service is the $http service I encapsulated, and the show method is the switch for view information display (no need to pay attention to these)!
I have introduced the relevant content about how Ionic can implement pull-down refresh and pull-up loading that the editor has introduced to you. I hope it will be helpful to you. If you want to know more, please pay attention to the Wulin.com website!