Ionic saat ini merupakan kerangka pengembangan aplikasi seluler HTML5 yang paling menjanjikan. Bangun aplikasi melalui SASS, yang menyediakan banyak komponen UI untuk membantu pengembang mengembangkan aplikasi yang kuat. Ini menggunakan kerangka kerja JavaScript MVVM dan AngularJS untuk meningkatkan aplikasi. Memberikan pengikatan data dua arah, dan menggunakannya menjadi pilihan umum untuk pengembang web dan seluler. Ionic adalah kerangka kerja pengembangan yang berfokus pada penggunaan teknologi pengembangan web dan membuat aplikasi asli yang mirip dengan platform ponsel berdasarkan HTML5. Tujuan dari kerangka kerja ionik adalah untuk mengembangkan aplikasi seluler dari perspektif web. Ini didasarkan pada platform kompilasi PhoneGap, yang dapat dikompilasi ke dalam aplikasi di berbagai platform.
Artikel ini memperkenalkan Anda cara menerapkan fungsi penyegaran pull-down dan memuat pull-up di ioinc. Fitur ini sering ditemui selama pengembangan proyek. Teman yang tertarik bisa melihatnya.
Bagian html
<ion-view view-title = "notification pesan"> <terion-ontent> <!-<Ion-Refresher> Pull-down Refresh command-> <ion-refresher tarik-text = "tarik ke refresh" on-refresh = "vm.dorefresh ()"> </ion-refresher> <vr-repePres = "" MESSES = "> </ion-refresher> <v.v.pm." MESSES = "" MESSES = "" MESSES = "MESSORE () </ion-REFRESHER> </Ion-REPRESH =" V. ><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 Instruksi Jarak Ketika nilai % NF-if false, eksekusi on-infinite-> <ion-infinite-scroll ng-if = "! vm.moredata" on-infinite = "vm.loadmore ()" " % =" % on-infinite = "vm.loadmore ()" " % =" % On-Infinite = "VM.LOADOUDMORTER ()" >/ion-infinite-scroll> </ion-content> </ion-view>Bagian JS
• Fungsi fungsi yang dipicu oleh pull-down on-refresh harus disiarkan sebelum akhir eksekusi fungsi fungsi, $ scope. $ Broadcast ('scroll.refreshComplete');
• Fungsi yang dipicu oleh pull-up on-tak terbatas juga perlu mengakhiri acara siaran $ scope. $ Broadcast ('scroll.infinitescrollComplete');
angular.module ('starter.controllers', []). controller ('infoctrl', function ($ rootscope, $ timeout, $ interval, $ scope, $ http, services) {var vm = $ scope.vm = {moredata: false, pesan: [], pagination: {paging: {moredata: {moredata: fungsi: {pagin: {pagin: {paging: {pagin: {pagin: {pagin: {paginpage: {moredata: {paginpage: {pagin: {paginpage: {pagin: {moredata: {pagin: {pagin: {services.getMessages ({Perpage: vm.pagination.perpage, page: vm.pagination.currentpage}, function (data) {vm.messages = data;})}, show: function (pesan) {if (pesan. () {$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 ();}))Pesan di sini adalah data yang ditampilkan oleh tampilan, pagination adalah parameter yang ditampilkan untuk pemuatan pagination, layanan adalah layanan $ http yang saya selesaikan, dan metode show adalah sakelar untuk tampilan tampilan informasi (tidak perlu memperhatikan ini)!
Saya telah memperkenalkan konten yang relevan tentang bagaimana ionik dapat menerapkan penyegaran pull-down dan pemuatan pull-up yang telah diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda ingin tahu lebih banyak, harap perhatikan situs web Wulin.com!