在一些網(wǎng)頁應(yīng)用中，有時(shí)會(huì)碰到一個(gè)超級(jí)巨大的列表，成千上萬行，這時(shí)大部份瀏覽器解析起來就非常痛苦了（有可能直接卡死）。
也許你們會(huì)說可以分頁或動(dòng)態(tài)加載啊？但是有可能需求不允許分頁，動(dòng)態(tài)加載？網(wǎng)絡(luò)的延遲也會(huì)造成體驗(yàn)不好。
那么適時(shí)候介紹本文的實(shí)現(xiàn)思路了。
首先上最終的效果：
主要思路如下：
首先，創(chuàng)建如上圖所示的三個(gè)DIV，scrollbar用于顯示具體的滾動(dòng)條（CSS需要設(shè)置zindex，要顯示在demo-list的底層），real-panel用于計(jì)算列表的實(shí)際高度（每一個(gè)li的高度是固定的，有多少項(xiàng)數(shù)據(jù)也是知道的，由此可以計(jì)算出列表的實(shí)際高度），demo-list主要用于當(dāng)前滾動(dòng)條高度對(duì)應(yīng)的實(shí)際數(shù)據(jù)（css需要設(shè)置zindex，顯示于scrollbar的上層，需要使用JS計(jì)算寬度等于real-panel的寬度，這樣就剛好覆蓋掉底層滾動(dòng)條外的區(qū)域）。
然后，使用KO對(duì)數(shù)據(jù)實(shí)現(xiàn)綁定，由于KO的雙向綁定，我們可以不用再去實(shí)現(xiàn)滾動(dòng)滾動(dòng)條時(shí)數(shù)據(jù)變化時(shí)帶來的更新操作。
最后，就是兼容性了。本文的具體實(shí)現(xiàn)在IE6\7\8\9\10\11,FireFox,Chrome,Edge上效果完美。
下面貼代碼：flyweight.js
網(wǎng)友評(píng)論
