วิธีการใช้ฟังก์ชั่นการรีเฟรชแบบเลื่อนลงและฟังก์ชั่นการโหลดแบบดึงขึ้น

ปัจจุบัน Ionic เป็นกรอบการพัฒนาแอปพลิเคชัน HTML5 ที่มีแนวโน้มมากที่สุด สร้างแอปพลิเคชันผ่าน SASS ซึ่งให้ส่วนประกอบ UI มากมายเพื่อช่วยให้นักพัฒนาพัฒนาแอปพลิเคชันที่มีประสิทธิภาพ มันใช้กรอบ JavaScript MVVM และ AngularJS เพื่อปรับปรุงแอปพลิเคชัน ให้ข้อมูลสองทางที่มีผลผูกพันและการใช้มันกลายเป็นตัวเลือกทั่วไปสำหรับนักพัฒนาเว็บและนักพัฒนามือถือ Ionic เป็นกรอบการพัฒนาที่มุ่งเน้นการใช้เทคโนโลยีการพัฒนาเว็บและสร้างแอพพลิเคชั่นดั้งเดิมที่คล้ายกับแพลตฟอร์มโทรศัพท์มือถือตาม HTML5 วัตถุประสงค์ของเฟรมเวิร์กไอออนิกคือการพัฒนาแอพพลิเคชั่นมือถือจากมุมมองของเว็บ มันขึ้นอยู่กับแพลตฟอร์มการรวบรวมของ PhoneGap ซึ่งสามารถรวบรวมลงในแอปพลิเคชันบนแพลตฟอร์มต่างๆ

บทความนี้แนะนำวิธีการใช้ฟังก์ชั่นการรีเฟรชแบบดึงลงและฟังก์ชั่นการโหลดแบบดึงขึ้นใน IOINC คุณลักษณะนี้มักจะพบในระหว่างการพัฒนาโครงการ เพื่อนที่สนใจสามารถดูได้

ส่วน HTML

 <ion-view view-title = "การแจ้งเตือนข้อความ"> <ion-content> <!-<ion-refresher> คำสั่งรีเฟรชแบบดึงลง-> <ion-refresher pulling-text = "pull to refresh" on-repeat = "vm.dorefresh ()"> > <div> {{message.title}} <i ng-click = "vm.show (ข้อความ)" ng-class = "message.static? )}} </div> </div> <!-Ion-Infinite-Scroll-Scroll Data Loading Data Data การโหลดระยะทางเมื่อค่า % NF-if เป็นเท็จการดำเนินการของ Infinite-> <ion-infinite-scroll ng-if = "! >//ion-infinite-scroll> </ion-content> <//ion-view>

ส่วน JS

•ฟังก์ชั่นฟังก์ชั่นที่ถูกเรียกโดยการดึงลงแบบ on-refresh จะต้องออกอากาศก่อนสิ้นสุดการดำเนินการของฟังก์ชั่นฟังก์ชั่น, $ scope. $ broadcast ('Scroll.refreshomplete');

•ฟังก์ชั่นที่ถูกเรียกโดยการดึงขึ้นที่ไม่สิ้นสุดยังจำเป็นต้องยุติการออกอากาศเหตุการณ์ $ scope $ broadcast ('scroll.infinitescrollcomplete');

 Angular.module ('Starter.Controllers', []). คอนโทรลเลอร์ ('infoctrl', ฟังก์ชั่น ($ rootscope, $ หมดเวลา, $ Interval, $ scope, $ http, บริการ) {var vm = $ scope.vm = {moredata: เท็จ {services.getMessages ({perpage: vm.pagination.perpage, หน้า: vm.pagination.currentpage}, ฟังก์ชั่น (ข้อมูล) {vm.messages = data;})}, แสดง: ฟังก์ชั่น (ข้อความ) {ถ้าข้อความ () {$ scope. $ broadcast ('scroll.refreshomplete');},);}, loadmore: function () {vm.pagination.currentpage +=; services.getMessages ({perpage: vm.pagination.perpage, หน้า: vm.pagination.currentpage} vm.messages.concat (data); if (data.length ==) {vm.moredata = true;}; $ scope. $ broadcast ('scroll.infinitescrollcomplete');})}} vm.init ();})

ข้อความที่นี่คือข้อมูลที่แสดงโดยมุมมองการแบ่งหน้าคือพารามิเตอร์ที่แสดงสำหรับการโหลดการปัดส่วนบริการคือบริการ $ http ที่ฉันห่อหุ้มและวิธีการแสดงคือสวิตช์สำหรับการแสดงข้อมูลมุมมอง (ไม่จำเป็นต้องใส่ใจกับสิ่งเหล่านี้)!

ฉันได้แนะนำเนื้อหาที่เกี่ยวข้องเกี่ยวกับวิธีที่ Ionic สามารถใช้การรีเฟรชแบบเลื่อนลงและการโหลดแบบดึงขึ้นที่ตัวแก้ไขได้แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดใส่ใจกับเว็บไซต์ Wulin.com!