เมื่อเรียกดูหน้าเว็บบนโทรศัพท์มือถือมักใช้ฟังก์ชั่น เมื่อเราเรียกดู JD หรือ Taobao หน้าจะเลื่อนไปที่ด้านล่างและเราจะเห็นว่าข้อมูลจะถูกโหลดลงในรายการโดยอัตโนมัติ ฉันไม่ทราบว่าฟังก์ชั่นเหล่านี้ถูกนำไปใช้มาก่อนดังนั้นฉันจึงจำลองและใช้ฟังก์ชั่นดังกล่าวบนเบราว์เซอร์พีซีของฉัน มาดูเอฟเฟกต์การเรียกดู:
เมื่อแถบเลื่อนเลื่อนไปที่ด้านล่างของหน้าจะปรากฏตัว "โหลด ... "
เมื่อหน้ามีการโหลดข้อมูลทั้งหมดการเลื่อนไปที่ด้านล่างของหน้าจะแจ้งให้ "ข้อมูลถูกโหลดไปยังจุดสิ้นสุด"::
กระบวนการใช้การโหลดข้อมูลที่ไม่มีที่สิ้นสุดมีดังนี้:
1. แถบเลื่อนไปที่ด้านล่างของหน้า
2. ทริกเกอร์ AJAX โหลดและโหลดข้อมูลที่ส่งคืนโดยคำขอไปยังรายการ
จะบอกได้อย่างไรว่าแถบเลื่อนเลื่อนไปที่ด้านล่างของหน้าหรือไม่? เราสามารถตั้งค่ากฎ: เมื่อความสูงของสกรอลล์ของแถบเลื่อนนั้นน้อยกว่า 20 พิกเซลที่แตกต่างจากความสูงของเอกสารทั้งหมดก็ถือว่าแถบเลื่อนได้เลื่อนไปที่ด้านล่างของหน้า:
ความสูงของเอกสาร - ความสูงของ Viewport - Scroll Bar ความสูงความสูง <20
เพื่อให้บรรลุการตัดสินดังกล่าวผ่านรหัสเราต้องเข้าใจว่ารหัสใดที่ได้รับความสูงข้างต้นผ่าน? คุณสามารถอ้างถึงบทความที่ฉันเขียนไว้ก่อนหน้านี้ "HTML Element ประสานงานการวางตำแหน่งคุณต้องเชี่ยวชาญคะแนนความรู้เหล่านี้"
ในการตัดสินข้างต้นฉันห่อหุ้มวิธีการ:
// การตรวจจับว่าแถบเลื่อนเลื่อนไปที่ด้านล่างของฟังก์ชันหน้า isscrolltopageBottom () {// ความสูงของเอกสาร var documentHeight = document.documentelement.offSetheight; var viewPortheight = getViewPortSize (). h; var scrollheight = window.pageyoffset || document.documentelement.scrolltop || document.body.scrolltop || 0; ส่งคืน DocumentHeight - Viewportheight - Scrollheight <20; -เมื่อเรามีการตัดสินเราสามารถเปิดตัวจับเวลาและตรวจสอบได้หนึ่งครั้งใน 900 มิลลิวินาที หาก isscrolltopageBottom () ส่งคืนจริงโทรหา AJAX เพื่อขอข้อมูล หากส่งคืนเท็จจะผ่าน 900 มิลลิวินาทีก่อนการตรวจสอบ
ต่อไปนี้คือการใช้รหัสหลัก:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> pagination infinite </title> <link rel = "stylesheet" href = "entsets/css/index.cs"/> </head> src = "// cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script><script src =" js/jQuery.mockjax.js "> </script> <script type =" text/javascript คุณสมบัติ W และ H ของวัตถุส่งคืนฟังก์ชั่นขนาดของ Viewport GetViewPortSize (W) {// ใช้หน้าต่างที่ระบุหากไม่มีพารามิเตอร์ให้ใช้หน้าต่างปัจจุบัน w = w || หน้าต่าง; // ยกเว้น IE8 และเวอร์ชันก่อนหน้าเบราว์เซอร์อื่น ๆ สามารถใช้ถ้า (W.innerWidth! = null) return {W: W.InnerWidth, H: W.innerHeight}; // สำหรับ IE (หรือเบราว์เซอร์ใด ๆ ) ในโหมดมาตรฐาน var d = w.document; if (document.CompatMode == "CSS1COMPAT") return {W: D.DocumentElement.ClientWidth, H: D.DocumentElement.ClientHeight}; // กลับไปที่เบราว์เซอร์ในโหมดแปลก {W: d.body.clientWidth, h: d.body.clientheight}; } // การตรวจจับว่าแถบเลื่อนเลื่อนไปที่ด้านล่างของฟังก์ชันหน้า isscrolltopageBottom () {// ความสูงของเอกสาร var documentHeight = document.documentElement.offSetheight; var viewPortheight = getViewPortSize (). h; var scrollheight = window.pageyoffset || document.documentelement.scrolltop || document.body.scrolltop || 0; ส่งคืน DocumentHeight - Viewportheight - Scrollheight <20; } // ฟังก์ชั่นเทมเพลตผลิตภัณฑ์ getGoodstemplate (สินค้า) {return "<li>" + "<div class = 'pic-wrap leftfloat'>" + "<img src = '" + goods.pic + ">" + "</div>" + "<div class =' info-wrap ซ้าย "<div class = 'info-address'> <span>" + goods.address + "</span> </div>" + "<div class = 'info-bottom'>" + "<div class = 'INFO-PRICE LeftFloat'> <span> ￥" "แนะนำ </span> </div>" + "<div class = 'ข้อมูลเพิ่มเติมด้านซ้าย'> <span> ข้อมูลเพิ่มเติม </span> </div>" + "</div>" + "</div>" + "</li>"; } // โหลดข้อมูลโดยตรง 100 ชิ้นในรายการระหว่างการเริ่มต้น $ .ajax ("http: // localhost: 8800/loaddata? sessionid =" + ( + วันที่ใหม่)). เสร็จสิ้น (ฟังก์ชั่น (ผลลัพธ์) {ถ้า (result.status) {var html = "" $ ("#list"). ภาคผนวก (HTML);}}); // การโหลดฟังก์ชั่นข้อมูล loadDatAdynamic () {// ก่อนแสดงว่ากำลังโหลดถ้า ($ ("#loadingli"). ความยาว === 0) $ ("#list"). ผนวก ("<li id = 'loadingli' class = 'โหลด'> โหลด ... </li>"); else {$ ("#loadingli") ข้อความ ("โหลด ... "). RemoveClass ("Space"); } var loadingli = document.getElementById ("loadingli"); loadingli.scrollintoview (); // การโหลดข้อมูลหลังจากโหลดข้อมูลคุณต้องลบการโหลดพรอมต์ var hasdata = false, msg = ""; $ .ajax ("http: // localhost: 8800/loaddata? sessionid =" + ( + วันที่ใหม่)). ทำ (ฟังก์ชั่น (ผลลัพธ์) {ถ้า (result.status) {ถ้า (result.data.length> 0) {hasdata = true; var html = "" }); $ (document.body) .scrolltop (document.body.scrolltop -40);}, 500); } // หากแถบเลื่อนเลื่อนไปที่ด้านล่างของหน้าต้องมีการโหลดข้อมูลใหม่และการโหลดพรอมต์จะแสดงฟังก์ชั่น watchScroll () {ถ้า (! isscrolltopageBottom ()) {settimeout (arguments.callee, 900); กลับ; } loadDatadynamic (); } // เริ่มตรวจจับ scrollbar watchscroll (); </script> </body> </html>ข้อมูลที่ฉันจำลองผ่าน jQuery-Mockjax ในการสาธิต รหัสมีดังนี้:
/*** อินเทอร์เฟซการจำลอง */var i = 0, len = 200, ที่อยู่ = ["Sichuan", "Beijing", "Shanghai", "Guangzhou", "Shenzhen", "Gansu", "Yunnan", "zhejiang", "Qinghai", "Guizhou" - สำหรับ (; i <size; i ++) {arr.push ({ชื่อ: "Apple" + (i % 10 + 1), pic: "ทรัพย์สิน/รูปภาพ/iPhone" + (i % 10 + 1) + ".jpg", ราคา: parseint (math.random () * 10000), star: parseint (math.random () arr;} $. mockjax ({url: 'http: // localhost: 8800/loaddata*', responsetime: 1000, การตอบสนอง: ฟังก์ชั่น (การตั้งค่า) {this.responsetext = {สถานะ: จริง, ข้อมูล: getData ()}}});การสาธิตเต็มทั้งหมดที่ฉันอัปโหลดไปยัง GitHub:
https://github.com/heavis/pageloader
การสาธิตออนไลน์:
https://heavis.github.io/pageloader/index.html
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น