คำนำ
ในส่วนก่อนหน้านี้มีโครงการมือถือที่จำเป็นในการใช้การรีเฟรชแบบเลื่อนลงและการโหลดเอฟเฟกต์มากขึ้น การไตร่ตรองครั้งแรกในใจของฉันคือผลของ Weibo ในตอนแรกฉันมีการเบี่ยงเบนในความเข้าใจของฉัน ฉันคิดว่า Pull-Down เป็นข้อมูลผนวกและ Pull-Up เป็นข้อมูลผนวก ต่อมาฉันถามเพื่อนร่วมงานของฉันและพบว่าการดึงลงเป็นเพียงการรีเฟรชข้อมูลล่าสุดและการดึงขึ้นเป็นข้อมูลผนวก
เคล็ดลับการใช้งาน
1. อ้างถึง isCroll.js และเพิ่มการฟังเหตุการณ์สองครั้งในระหว่างการเริ่มต้น: TouchMove และ DomcontentLoaded
2. ใช้เหตุการณ์ onscrollend ของปลั๊กอิน Iscroll นั่นคือในเหตุการณ์นี้เรียกวิธี Ajax ของคุณเองเพื่อรีเฟรชและผนวกข้อมูล
3. เมื่อดึงขึ้นและโหลดคำขอเพิ่มเติมในพื้นหลังมันจะเทียบเท่ากับข้อมูลคำขอเพจ ในเวลานี้พารามิเตอร์ PageIndex จะต้องถูกส่งระหว่างการร้องขอ AJAX และเมื่อเริ่มต้นการโหลดจะต้องส่งกลับจากพื้นหลังเพื่อให้เบื้องหน้าตัดสิน
4. สิ่งที่สำคัญที่สุดคือการใช้วิธีการรีเฟรชแบบ pulldown (pulldownaction) และวิธีการดึงข้อมูลเพิ่มเติม (pullupaction)
ไดอะแกรมเอฟเฟกต์
วิธีการดำเนินการ
var myscroll, pulldownel, pulldownoffset, pullupel, pullupoffset, generatedCount = 0;/** * การรีเฟรชแบบดึงลง (ปรับแต่งวิธีนี้) * myscroll.refresh (); หลังจากโหลดข้อมูลให้เรียกใช้วิธีการอัปเดตอินเตอร์เฟส */ฟังก์ชัน pulldownaction () {settimeout (function () {var el, li, i; el = document.getElementByid ('thelist'); สำหรับ (i = 0; i <3; i ++) el.childnodes [0]);} myscroll.refresh (); }/** * หน้าเลื่อนและเปิด (ปรับแต่งวิธีนี้) * myscroll.refresh (); // หลังจากการโหลดข้อมูลให้เรียกใช้วิธีการอัปเดตอินเตอร์เฟส*/ฟังก์ชั่น pullUpaction () {settimeout (function () {// <- จำลองความแออัดของเครือข่าย, ลบ settimeout ออกจากการผลิต! var el, li, i; el = document.getElementById ('thelist'); สำหรับ (i = 0; i <3; (++ สร้างขึ้น); }/*** เริ่มต้นการควบคุม iScroll*/ฟังก์ชั่นโหลด () {pulldownel = document.getElementById ('pulldown'); pulldownoffset = pulldownel.offsetheight; pullupel = document.getElementById ('pullup'); pullupoffset = pullupel.offsetheight; myscroll = new iScroll ('wrapper', {scrollbarclass: 'myscrollbar', usetransition: false, topoffset: pulldownoffset, onrefresh: function () {ถ้า (pulldownel.classname.match ('loading')) Pulldownel.QuerySelection ('. Pulldownlabel'). InnerHtml = 'Pulldown Refresh ... '; onscrollmove: function () {ถ้า (this.y.y> 5 &&! puldownel.classname.match ('flip')) {pulldownel.classname = 'flip'; pulldownel.classname.match ('flip')) {pulldownel.classname = ''; ! pullupel.classname.match ('flip')) {pullupel.classname = 'flip'; pullupel.classname.match ('flip')) {pullupel.classname = ''; pulldownel.classname = 'โหลด'; Pullupel.QuerySelection ('. Pulluplabel'). innerhtml = 'การโหลด ... ' settimeout (function () {document.getElementById ('wrapper'). style.left = '0';}, 800);} // เริ่มต้นเอกสารการควบคุม IsCroll ที่มีผลผูกพัน addeVentListener ('touchmove', ฟังก์ชัน (e)สรุป
สิ่งสำคัญคือการดำเนินการเริ่มต้นบางอย่างบน ISCroll แสดงข้อมูลพรอมต์ที่แตกต่างกันสำหรับการกระทำที่แตกต่างกันจากนั้นเขียนการรีเฟรชที่สอดคล้องกันและโหลดวิธีการประมวลผลเพิ่มเติมสำหรับเหตุการณ์แบบเลื่อนลงและการดึงขึ้น