listloading เป็นแบบดึงขึ้นมือถือและดึงส่วนประกอบที่เพิ่มขึ้น ส่วนใหญ่อาศัยส่วนประกอบที่พัฒนาขึ้นจาก iscroll.js v5.1.2 ไลบรารีพื้นฐานสามารถใช้ jQuery.js หรือ zepto.js เพื่อใช้งานโหนด DOM ขณะนี้ฉันใช้ zepto.js เป็นไลบรารีพื้นฐานเพื่อใช้งาน DOM และมีอยู่ในรูปแบบของปลั๊กอิน jQuery หากคุณไม่ต้องการใช้เป็นปลั๊กอินคุณเพียงแค่ต้องพอร์ตการโหลดรายการไปยังไลบรารีที่คุณต้องการโดยตรงก็โอเค ListLoading ส่วนใหญ่ออกแบบมาสำหรับเทอร์มินัลมือถือ เมื่อใช้เบราว์เซอร์มันมาพร้อมกับการเลื่อน ประสบการณ์ผู้ใช้ไม่เป็นมิตรมากและแตกต่างจาก Android และ iOS มาก ดังนั้นจึงเลือก isCroll.js วิธีการใช้งานคือการใช้แอนิเมชั่น CSS3 แปลการแปลง 2D เพื่อให้ได้เอฟเฟกต์การเลื่อน แอตทริบิวต์การแปลงใช้การเร่งความเร็วฮาร์ดแวร์และวิธีการประสิทธิภาพได้รับการปรับปรุงอย่างมาก
การติดตั้ง NPM
การคัดลอกรหัสมีดังนี้:
npm ติดตั้ง -g listloading
วิธีใช้เป็นดังนี้:
1. โครงสร้าง HTML
โครงสร้างเดียวกับ IsCroll ที่สร้างขึ้น แต่โหนดองค์ประกอบที่สร้างขึ้นที่ระบุจะต้องระบุ ID เนื่องจากจำเป็นต้องมีข้อมูลประจำตัวที่ระบุตัวตนได้สำหรับการเผยแพร่โหมดการสมัครสมาชิกในส่วนประกอบ เนื่องจาก Iscroll ต้องตั้งค่าความสูงก่อนที่องค์ประกอบโหนดจะถูกสร้างขึ้นมิฉะนั้นจะไม่สามารถเลื่อนได้ Iscroll ถูกสร้างขึ้นและถูกกำหนดให้กับองค์ประกอบลูกแรกเพื่อเลื่อนดังนั้นการรีเฟรชแบบดึงขึ้นและแบบเลื่อนลงของ ListLoading จะถูกเพิ่มเข้าไปในองค์ประกอบลูกแรก ในความเป็นจริงลองจินตนาการถึงองค์ประกอบของเด็กคนแรกในฐานะร่างกายใน HTML
2. js ที่จำเป็นต้องได้รับการแนะนำ
<script src = "../ src/jslib/zepto.min.js"> </script> <script src = "../ src/jslib/iscroll.js"> </script> <script src = "../ build/listloading.js">
3. โทร
var m = 3, n = 0; // คุณต้องตั้งค่าความสูงขององค์ประกอบหลักก่อนที่จะสร้าง iScroll มิฉะนั้นคุณไม่สามารถลาก iscroll $ ('#listloading'). ความสูง ($ (หน้าต่าง) .height ()); // แม่แบบหรือวิธีการร้องขอ ajax วันที่ (). getTime (); ตอนนี้ = วันที่ใหม่ (ตอนนี้ + i*1000000); __ html + = '<li> <span> </pan> <p> <p> <p> <p> <p> <p> <time>' + now.gethours () + ':' + ตอนนี้ pultminutes () + ' ส่วนประกอบรีเฟรช ... </li> ';} return __html;} // ตัวเลือกจะต้องเป็น ID เพราะจำเป็นต้องใช้การสมัครสมาชิกเป็นตัวระบุ var listloading = $ ('#listloading ') listloading ({disableTime: จริง createhtml (); ถ้า (m <1) {flg = true;} else {$ ('#order-list'). ผนวก (__ html);} // หลังจากโหลดข้อมูลแล้วมันจำเป็นต้องกลับไปที่ TRUE CreateHtml (); $ ('#order-list'). html (__ html); // หลังจากวิธีการดำเนินการแล้วการเรียกกลับต้องดำเนินการ ฟองมันยังแนะนำให้เขียนวิธีการคลิกด้วยตัวเอง หากคุณเปิดใช้งาน PreventDefault เป็น FALSE บรรทัดนี้จะแก้ปัญหาของความล้มเหลว onclick อย่างไรก็ตามหากคุณเปิดค่านี้และลากภายใต้ WeChat จะมีปัญหา หลังจากสไลด์สิ้นสุดลงสกรอลล์ไม่สามารถเรียกใช้ ดังนั้นฉันจึงฝังวิธีการเหตุการณ์ด้วยตัวเอง listloading.evt ('li', 'คลิก', ฟังก์ชั่น (dom) {// dom.remove (); // $ ('#order-list'). ผนวก (createhtml ()); // listloading.refresh ();});แผนผังการสืบพันธุ์
/p>
4. API
4.1 ดึงลงเพื่อรีเฟรช
การเริ่มต้นจะถูกดำเนินการหนึ่งครั้งโดยส่วนใหญ่เพื่อสร้าง isCroll จากนั้นการรีเฟรชแบบดึงลงแต่ละครั้งจะถูกดำเนินการหลังจากสิ้นสุดการรีเฟรชแบบดึงลงแต่ละครั้ง หลังจากการดำเนินการโปรแกรมของคุณในวิธีการจะต้องดำเนินการฟังก์ชันการโทรกลับเพื่อแจ้งโปรแกรมทั้งหมดที่ดำเนินการแล้ว ListLoading จะเรียกใช้ฟังก์ชันรีเฟรช ISCroll โดยอัตโนมัติและการเรียกกลับไม่จำเป็นต้องมีการส่งพารามิเตอร์
ตัวเลือก pullDownAction = function (cb) {// pull refresh .... // หลังจากดำเนินการวิธีการดำเนินการโทรกลับ cb () จะต้องดำเนินการ;}4.2 การรีเฟรชแบบดึงขึ้น
การรีเฟรชแบบดึงขึ้นแต่ละครั้งจะดำเนินการหลังจากการรีเฟรชเสร็จสมบูรณ์ จำเป็นต้องใช้ฟังก์ชันการโทรกลับหลังจากดำเนินการโปรแกรมของคุณ จำเป็นต้องมีค่าบูลีนในการโทรกลับ หากเป็นจริงทำไมมันถึงถูกโหลดและถูกดึงไปจนจบ
ตัวเลือก pullUpaction = function (cb) {// การรีเฟรชแบบดึงลง .... // หลังจากดำเนินการวิธีการดำเนินการการเรียกกลับจะต้องเป็นจริงเพื่อดึงลงไปที่ปลาย CB (จริง);}4.3 ทำลาย ListLoading
การคัดลอกรหัสมีดังนี้:
listloading.destroy ();
4.4 Refresh ListLoading
หากมีการเพิ่มเติมและลบในโหนดพื้นที่เลื่อนคุณต้องเรียกวิธีนี้หลังจากการดำเนินการเสร็จสมบูรณ์
การคัดลอกรหัสมีดังนี้:
listloading.refresh ();
4.5 ว่าจะแสดงค่าเริ่มต้นเวลาเป็นเท็จ
การดึงลงอย่างแท้จริงจะแสดงเวลาเวลาจากการรีเฟรชครั้งสุดท้าย
การคัดลอกรหัสมีดังนี้:
ตัวเลือก. disableTime = true
4.6 ดึงขึ้นเพื่อรีเฟรชข้อความ
การคัดลอกรหัสมีดังนี้:
ตัวเลือก UploadMoretxt = 'ดึงขึ้นเพื่อรีเฟรชข้อความ'; // คุณสามารถใส่แท็ก HTML ไว้ในนั้นได้
4.7 ดึงลงเพื่อรีเฟรชข้อความ
การคัดลอกรหัสมีดังนี้:
ตัวเลือก pulldrefreshtxt = 'ลากลงเพื่อรีเฟรชข้อความ'; // คุณสามารถใส่แท็ก HTML ไว้ในนั้นได้
4.8 การโหลดอักขระจีน
การคัดลอกรหัสมีดังนี้:
ตัวเลือก loadertxt = 'อักขระภาษาจีนกำลังโหลด'; // คุณสามารถใส่แท็ก HTML ไว้ในนั้นได้
4.9 การเปิดตัวข้อความรีเฟรช
การคัดลอกรหัสมีดังนี้:
ตัวเลือก realtimetxt = 'รีรีย์ข้อความรีเฟรช'; // คุณสามารถใส่แท็ก HTML ไว้ใน
4.10 มีการโหลดข้อความทั้งหมดแล้ว
การคัดลอกรหัสมีดังนี้:
ตัวเลือก LoadElEndTxt = 'ข้อความทั้งหมดได้รับการโหลด'; // คุณสามารถใส่แท็ก HTML ไว้ในนั้นได้
4.12 การกำหนดค่า ISCroll
การคัดลอกรหัสมีดังนี้:
ตัวเลือก iscrolloptions = {};
ข้างต้นคือรายการส่วนประกอบรีเฟรชแบบดึงลงของเทอร์มินัลมือถือ listloading.js ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!