เมื่อคุณกำลังทำโครงการฟังก์ชั่นรีเฟรชแบบดึงลงเป็นเรื่องธรรมดามากคุณจะนำไปใช้อย่างไร ด้านล่างตัวแก้ไขจะแนะนำวิธีการใช้ไอออนิกเพื่อใช้ฟังก์ชั่นรีเฟรชแบบดรอปดาวน์เพจ มาดูกันเถอะ!
สำหรับการใช้งานเฉพาะโปรดดูที่ซอร์สโค้ดต่อไปนี้:
รหัส HTML
Ion-refresher: เป็นไอคอนที่รีเฟรชโดย pull-down;
Pulling-text = "การดึงการรีเฟรช" คำถามที่นี่สามารถแทนที่ได้ตามต้องการเช่นเดียวกับมัน;
on-refresh = "dorefresh ()" นี่คือวิธีที่เราต้องดำเนินการเมื่อดึงลง นี่คือข้อมูลหน้าสดชื่น
<body ng-app = "starter" ng-controller = "actionsheetctl"> <ion-pane> <ion-content> <ion-refresher pulling-text = "การรีเฟรชแบบเลื่อนลง" on-refresh = "dorefresh () ng-bind = "item.name"> </ion-item> </ion-list> </sontent> </ion-pane> </body>
รหัส JavaScript
$ scope.items [] นี่คือข้อมูลที่เพิ่งเข้ามาในหน้า
Dorefresh () เห็นได้ชัดว่านี่เป็นวิธีที่คุณดำเนินการเมื่อคุณต้องการรีเฟรช
item.json นี่คือเมื่อคุณคลิกเพื่อรีเฟรชและเราจำเป็นต้องรับข้อมูลอีกครั้ง JSON นี้เป็นข้อมูลล่าสุด ในโครงการคุณต้องรับข้อมูลจากเซิร์ฟเวอร์อีกครั้งและอัปเดตไปยังไคลเอนต์
Angular.module ('Starter', ['Ionic']). Run (ฟังก์ชั่น ($ ionicplatform) {$ ionicplatform.ready (function () {// ซ่อนแถบอุปกรณ์เสริมโดยค่าเริ่มต้น (ลบสิ่งนี้เพื่อแสดงแถบอุปกรณ์เสริมด้านบนคีย์บอร์ด // {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} ถ้า (window.statusbar) {statusbar.styledefault ();}});}) คอนโทรลเลอร์ ('actionsheetctl', ['$ scope', '$ หมดเวลา' , '$ http', ฟังก์ชั่น ($ scope, $ timeout, $ http) {$ scope.items = [{"ชื่อ": "html5"}, {"ชื่อ": "javascript"}, {"ชื่อ": "css3"}]; ปัญหาข้ามโดเมน $ http.get ('http://www.aliyue.net/demo_source/item.json') .success (ฟังก์ชั่น (newItems) {$ scope.items = newItems;}) {$ scope. $ broadcast ('scroll.refreshomplete');});};}])item.json ข้อมูลไฟล์:
[{"Name": "Rookie Tutorial"}, {"Name": "www.aliyue.net"}]Ionic ใช้การรีเฟรชแบบดรอปดาวน์เพจ (ฟังก์ชั่นไอออน-เอ็นฟ์เชอร์) และจะแนะนำคุณมากมาย ในอนาคตฉันจะแนะนำวิธีการใช้การโหลดสไลด์และฟังก์ชั่นเพิ่มเติม โปรดดำเนินการต่อเพื่อให้ความสนใจกับเนื้อหาที่น่าตื่นเต้นที่นำมาให้คุณโดย Wulin.com