วิธีแสดงรายการองค์ประกอบสูงสุด 10,000 อย่างถูกต้อง
เทคโนโลยีการโหลดแบบดรอปดาวน์แบบไม่มีที่สิ้นสุดช่วยให้ผู้ใช้สามารถเลื่อนและดูหน้าเนื้อหาจำนวนมาก วิธีนี้คือการโหลดเนื้อหาใหม่ในขณะที่คุณเลื่อนลง
เมื่อคุณใช้การเลื่อนเป็นวิธีหลักในการค้นหาข้อมูลมันสามารถอนุญาตให้ผู้ใช้ของคุณอยู่บนหน้าเว็บนานขึ้นและเพิ่มการมีส่วนร่วมของผู้ใช้ ด้วยความนิยมของโซเชียลมีเดียทำให้ผู้ใช้ใช้ข้อมูลจำนวนมาก การเลื่อนแบบไร้สายให้วิธีที่มีประสิทธิภาพเพื่อให้ผู้ใช้สามารถเรียกดูข้อมูลจำนวนมากโดยไม่ต้องรอให้โหลดหน้าโหลดไว้ล่วงหน้า
หากเราเปลี่ยนวิธีคิดของเราหากมีส่วนประกอบคอลัมน์ตรง 10,000 ส่วนบนหน้าเราจะใช้ 5 ส่วนประกอบเพื่อแสดงผลทั้งหน้าแบบไดนามิกได้อย่างไร
สารละลายในการเพิ่มประสิทธิภาพของรายการยาวเรามีวิธีแก้ปัญหามากมายเช่นเพจเพจ, การโหลดขี้เกียจ ฯลฯ มีการโต้ตอบที่ดีมาก (รูปภาพเบญจมาศ) เพื่อให้ผู้ใช้สามารถรอได้ แผนนี้ก็ประสบความสำเร็จเช่นกัน
จะหาวิธีอื่นได้อย่างไร?
1. ในการประยุกต์
2. เราสามารถใช้ตัวยึดเพื่อรองรับความยาวรายการทั้งหมดได้หรือไม่เมื่อหน้าจอเลื่อนไปยังตำแหน่งที่สอดคล้องกัน
ปัญหากระพริบเมื่อเราใช้ความคิดนี้จะมีปัญหาการกะพริบ เนื่องจากเหตุการณ์การเลื่อนเป็นบ่อยครั้งเราพบว่าองค์ประกอบที่เราเห็นนั้นถูกทาสีใหม่อย่างต่อเนื่องเพราะเราพบว่าองค์ประกอบสิบรายการต้องแสดงผลในแต่ละฉากและจากนั้นแทนที่โดยตรง
ความคิดที่นี่คือเมื่อฉันเห็นตำแหน่งหน้าจอฉันจะแสดงผล 10 และ 10 ขึ้นไปและลงด้วยทั้งหมด 30 เมื่อควบคุมการเรนเดอร์ฉันมักจะแทนที่องค์ประกอบด้านบนหรือล่างเพื่อให้ชิ้นส่วนที่เราเห็นตรงกลางจะไม่ถูกทาสีใหม่ มันเป็นเพียงข้อมูลที่แสดงผลล่วงหน้ากำลังถูกวาดใหม่
หลักการใช้ส่วนประกอบที่สามารถแสดงรายการของรายการ N ที่มีขนาดหน้าต่างคงที่ 5 องค์ประกอบ: นั่นคือเมื่อใดก็ได้มีเพียง 5 คอนเทนเนอร์ DOM ในองค์ประกอบ Scroll N ที่ไม่มีที่สิ้นสุด
<ul> <li style = transform: translate3d (0px, 0px, 0px);> … </li> <li style = transform: translate3d (0px, 60px, 0px);> … </li>
ตัวอย่างเช่น: 100 องค์ประกอบ 5 จะปรากฏขึ้นในหน้าแรก การเริ่มต้นของ [0,1,2,3,4] 5 <li> เหล่านี้จำเป็นต้องแสดงผล เมื่อฉันเลื่อนลงเล็กน้อย [1,2,3,4,5] เหล่านี้จำเป็นต้องมีการแสดงผล <li> ในเวลานี้อย่าแทนที่โดยรวมโดยตรงควรเปลี่ยนคำที่แตกต่างเท่านั้น โครงสร้างควรเป็น [5,1,2,3,4] เนื่องจากมันเป็นตำแหน่งที่แน่นอนมันจะถูกแยกออกจากสตรีมมาตรฐาน การวาดใหม่ครั้งเดียวจะไม่ส่งผลกระทบต่ออีกสี่คนซึ่งจะช่วยปรับปรุงประสิทธิภาพ
วิธีการใช้งาน <! doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0> <meta http-equiv = เนื้อหาที่เข้ากันได้กับ X-UA src = https: //cdn.bootcss.com/jquery/3.2.1/jquery.min.js> </script> <title> เอกสาร </ชื่อ> <style> ร่างกาย, ul, li {margin: 0; Padding: 0; รายการสไตล์: ไม่มี; } ul {ตำแหน่ง: ญาติ; } ul li {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 31px; ความสูงของสาย: 32px; ขอบด้านล่าง: 1px Solid #CCC; } </style> </head> <body><ul></ul> </body> <dody> <script> // container container var list = []; // องค์ประกอบในช่วงภาพ var var showlist = []; // render container var renderlist = []; // ความสูงของแต่ละคอนเทนเนอร์ var lineHeight = 32 // เริ่มต้นองค์ประกอบ 1,000 สำหรับ (var i = 0; i <1000; i ++) {list.push ({id: i, ข้อความ: 'th' + (i + 1) + 'องค์ประกอบ', top: i * lineHeight, ด้านล่าง: (i + 1) 'ความสูง:' + 1000 * lineHeight + 'px') // ค้นหาฟังก์ชั่นเรนเดอร์ (ด้านบนด้านล่าง) ของคอนเทนเนอร์เริ่มต้น {showlist = [] // mark ข้อมูลใดที่ซ้ำกับการแสดงผลหลังจากที่มันแสดงผลส่วนนี้จะไม่แสดงความยาว รายการ [i] if (item.top <= window.scrolly && item.bottom> window.scrolly) {currentindex = i; หยุดพัก; }} var range = 0 // ค้นหาองค์ประกอบที่จะแสดงขึ้นและลงตามลำดับในองค์ประกอบที่พบในปัจจุบันจนกระทั่งจำนวนทั้งหมดถึง 35 ในขณะที่ (ช่วง <100 && showlist.list.lent + sameindex.length <35) {ถ้า (currentIndex - ช่วง> = 0) {// เปรียบเทียบองค์ประกอบที่อยู่ในรายการ รายการโชว์ในเวลานั้นให้แทนที่องค์ประกอบที่ไม่ได้ทำเครื่องหมายถ้า (renderlist.includes (รายการ [currentindex - ช่วง] .id)) {// Sameindex.push (CurrentIndex -Range) SameIndex.unshift (renderlist.indexof ช่วง <list.length && ช่วง! = 0) {ถ้า (renderlist.includes (รายการ [currentindex + range] .id)) {SameIndex.push (renderlist.indexof (รายการ [currentindex + ช่วง] องค์ประกอบที่ไม่ได้ทำเครื่องหมายถ้า (renderlist.length> 0) {สำหรับ (var i = 0; ฉัน <renderlist.lent; i ++) {if (! sameindex.includes (i) && showlist.length) {renderlist [i] = showlist.shift (). id $ ('ul li'). eq (i) .html (รายการ ' รายการ [renderlist [i]]. top + 'px, 0px);')}}} else {// เริ่มต้นรายการเป็นครั้งแรก renderlist = showlist.map (ฟังก์ชั่น (val) {return val.id}) renderlist.map (ฟังก์ชั่น (key) {$ ( รายการ [key] .top + 'px, 0px);>#' + list [key] .id + list [key] .text + '</li>'))})} console.log (renderlist)} // เรนเดอร์ครั้งแรก สิ่งที่ต้องทำประเด็นสำคัญ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น