Ionic est actuellement le cadre de développement d'applications mobiles HTML5 le plus prometteur. Créer des applications via SASS, qui fournit de nombreux composants d'interface utilisateur pour aider les développeurs à développer des applications puissantes. Il utilise le framework MVVM JavaScript et AngularJS pour améliorer les applications. Fournit une liaison bidirectionnelle des données, et l'utiliser devient un choix courant pour les développeurs Web et mobiles. Ionic est un cadre de développement qui se concentre sur l'utilisation de la technologie de développement Web et crée des applications natives similaires aux plates-formes de téléphonie mobile basées sur HTML5. Le but du cadre ionique est de développer des applications mobiles du point de vue du Web. Il est basé sur la plate-forme de compilation de PhoneGap, qui peut être compilé en applications sur diverses plates-formes.
Cet article vous découvre comment implémenter les fonctions de rafraîchissement et de chargement de traction dans IOINC. Cette fonctionnalité est souvent rencontrée pendant le développement du projet. Les amis intéressés peuvent jeter un œil.
Partie HTML
<ion-visuel View-Title = "Message Notification"> <ion-content> <! - <ion-refresher> Commande de refroidissement pull-down -> <ion-refresher pull-tex > <div> {{message.title}} <i ng-Click = "vm.show (message)" ng-class = "message.static? 'ion-arrow-down-b': 'ion-arrow-droite-b'"> </i> </ div> <div> <div> {{message.static? Message.Content: Message. )}} </div> </div> <! - Ion-infinite-Scroll Pull-up Données de chargement de chargement Distance lorsque la valeur de% nf-if est fausse, l'exécution de On-infinite -> <ion-infinite-scroll ng-if = "! vm.Moredata" On-infinite = "vm.Loadmore ()" Distance = "%" > / ion-infinite-scroll> </ ion-content> </ ion-view>Partie js
• La fonction de fonction déclenchée par la mise à la baisse sur le refroidissement doit être diffusée avant la fin de l'exécution de la fonction de fonction, $ scope. $ Broadcast ('scroll.refreshcomplete');
• La fonction déclenchée par le traction On-infinite doit également mettre fin à l'événement de diffusion $ scope. $ Broadcast («scroll.infinitescrollcomplete»);
angular.module ('starter.controllers', []). Controller ('Infoctrl', fonction ($ rootscope, $ timeout, $ interval, $ scope, $ http, services) {var vm = $ scope.vm = {moredata: false, messages: [], pagination: {perpage:, currentpage: {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 {messatic = true;}}, dorefresh: fure {$ 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); (data.length ==) {vm.MoreData = true;}; $ scope. $ Broadcast ('Scroll.infinitescrollComplete');})}} vm.Init ();})Les messages ici sont les données affichées par la vue, la pagination est le paramètre affiché pour le chargement de pagination, le service est le service $ http que j'ai encapsulé, et la méthode Show est le commutateur pour l'affichage des informations de la vue (pas besoin de prêter attention à ceux-ci)!
J'ai introduit le contenu pertinent sur la façon dont Ionic peut implémenter un chargement de rafraîchissement et de traction à traction que l'éditeur vous a introduit. J'espère que cela vous sera utile. Si vous voulez en savoir plus, veuillez faire attention au site Web de Wulin.com!