كيفية تنفيذ وظائف التحديث المنسد والتحميل السحب

Ionic هو حاليا أكثر إطار تطوير تطبيقات HTML5 للهاتف المحمول. بناء التطبيقات من خلال SASS ، والتي توفر العديد من مكونات واجهة المستخدم لمساعدة المطورين على تطوير تطبيقات قوية. يستخدم إطار عمل JavaScript MVVM و AngularJS لتعزيز التطبيقات. يوفر الربط ثنائي الاتجاه للبيانات ، ويصبح استخدامها خيارًا شائعًا لمطوري الويب والجوال. Ionic هو إطار تطوير يركز على استخدام تقنية تطوير الويب وإنشاء تطبيقات أصلية مماثلة لمنصات الهاتف المحمول على أساس HTML5. الغرض من الإطار الأيوني هو تطوير تطبيقات الهاتف المحمول من منظور الويب. يعتمد على منصة تجميع PhoneGap ، والتي يمكن تجميعها في تطبيقات على منصات مختلفة.

تقدم لك هذه المقالة كيفية تنفيذ وظائف التحديث والتحميل السحب في IOINC. غالبًا ما تتم مواجهة هذه الميزة أثناء تطوير المشروع. يمكن للأصدقاء المهتمين إلقاء نظرة.

جزء HTML

 <ion-view view-title = "message message"> <-ion-content> <!-<ion-resher> command grown-down refresh-> <ion-respresher pulling-text = "pull to refrested" on-refresh = "vm.dorefresh ()"> </ion-refresher> <iv ng-repat > <viv> {{message.title}} <i ng-click = "vm.show (message)" ng-class = "message.static؟ 'ion-arrow-down-b': 'ion-arrow-right-b'"> </i> </iv> <viv> )}} </div> </div> <!-أيون-إينفينيت-إيفنيت-scroll حملة تحميل البيانات المسافة عندما تكون قيمة ٪ nf-if خاطئة ، تنفيذ on-infinite-> <ion-infinite-scroll ng-if = "! >/ion-infinite-scroll> </ion-content> </on-view>

JS جزء

• يجب بث دالة الوظيفة الناتجة عن المنسدلة التي يتم الانسحاب منها على الانفران قبل نهاية تنفيذ وظيفة الوظيفة ، نطاق $. $ البث ('Scroll.RefreshComplete') ؛

• تحتاج الوظيفة الناتجة عن السحب على الحدود إلى إنهاء نطاق البث $. البث $ ('Scroll.infinitescrollete') ؛

 angular.module ('starter.controllers' ، []). وحدة التحكم ('Infoctrl' ، الدالة ($ rootscope ، $ timeout ، $ steral ، $ scope ، $ http ، services) {var vm = $ scope.vm = {moredata: false ، messages: []. {services.getMessages ({perpage: vm.pagination.perpage ، الصفحة: vm.pagination.currentPage} ، الدالة (البيانات) {vm.messages = data ؛})} ، show: function (message) {if (message.static) {message.static = false ؛ () {$ scope. $ broadcast ('scroll.refreshcomplete') ؛} ،) ؛} ، loadmore: function () {vm.pagination.currentPage += ؛ services.getMessages ({perpage: vm.pagination.perpage ، page: vm.pagination.currentpage} ، function (data) vm.messages.concat (data) ؛ if (data.length ==) {vm.moredata = true ؛} ؛ $ scope. $ broadcast ('scroll.infinitescrollete') ؛})}} vm.init () ؛})

الرسائل هنا هي البيانات التي يتم عرضها بواسطة العرض ، والترقيم هي المعلمة المعروضة لتحميل ترقيم الصفحات ، والخدمة هي خدمة HTTP $ التي قمت بتغليفها ، وطريقة العرض هي التبديل لعرض عرض المعلومات (لا حاجة إلى الانتباه إلى هذه)!

لقد قمت بتقديم المحتوى ذي الصلة حول كيفية تنفيذ Ionic لتحديث التحديث والانسحاب الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كنت تريد معرفة المزيد ، فيرجى الانتباه إلى موقع Wulin.com!