عندما تقوم بمشاريع ، فإن وظيفة التحديث المنسدلة شائعة جدًا ، فكيف تنفذها؟ أدناه ، سوف يقدم لك المحرر كيفية استخدام Ionic لتنفيذ وظيفة التحديث المنسدلة للصفحة. دعونا نلقي نظرة!
للتطبيقات المحددة ، يرجى الرجوع إلى رمز المصدر التالي:
رمز HTML
Ion-Refresher: هو الرمز الذي يتم تحديثه عن طريق المنسدلة ؛
سحب text = "سحب تحديث لأسفل" يمكن استبدال الأسئلة هنا حسب الرغبة ، تمامًا مثلها ؛
on-refresh = "dorefresh ()" هذه هي الطريقة التي نحتاج إلى تنفيذها عند الانسحاب. هنا هي بيانات الصفحة المنعشة.
<body ng-app = "starter" ng-controller = "actionSeetCtl"> <ion-pane> <ion-content> <ion-refresher pulling-text = "sroprow-down refresh" on-refresh = "dorefresh ()"> </eion-refresher> <Iion-libe> ng-bind = "item.name"> </ion-item> </ion-list> </os-content> </on-pane> </body>
رمز JavaScript
$ scope.items [] هذه هي البيانات التي دخلت للتو في الصفحة
من الواضح أن Dorefresh () هذه هي الطريقة التي تنفذها عندما تريد التحديث
item.json هذا هو عند النقر للتحديث ونحتاج إلى إعادة الحصول على البيانات. هذا JSON هو أحدث البيانات. في المشروع ، تحتاج إلى إعادة تعيين البيانات من الخادم وتحديثها إلى العميل.
Angular.Module ('starter' ، ['ionic']). run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// إخفاء شريط الملحقات بشكل افتراضي (أزل هذا لإظهار شريط الملحقات فوق لوحة المفاتيح // لمدخلات الشكل) إذا (window.cordova {cordova.plugins.keyboard.hidekeyboardAccessorybar (true) ؛} if (window.statusbar) {statusbar.styledefault () ؛}}) ؛}). وحدة التحكم ('actionsheettctl' ، ['$ scope' ، '$ timeout' ، '$ http' ، function ($ scope ، $ timeout ، $ http) {$ scope.items = [{"name": "html5"} ، {"name": "javaScript"} ، {"name": "css3" مشكلات عبر domain $ http.get ('http://www.aliyue.net/demo_source/item.json'). {$ scope. $ broadcast ('scroll.refreshcomplete') ؛}) ؛} ؛}])بيانات ملف item.json:
[{"name": "Rookie Tutorial"} ، {"name": "www.aliyue.net"}]الأدوات الأيونية تحديث الصفحة المنسدلة (وظيفة ion-refresher) وستقدم لك الكثير. في المستقبل ، سأقدم لك كيفية تنفيذ التحميل الشريحة والمزيد من الوظائف. يرجى الاستمرار في الانتباه إلى المحتوى المثير الذي جلبته لك Wulin.com.