听说你还不知道怎么制作虚拟清单？原谅我来晚了

.scroller{height:100%;}.desc{height:50px;琛岄珮锛?0px锛涙枃鏈榻愶細灞呬腑锛涙澶у皬锛氳竟妗嗘锛沚order:1pxsolid#ccc;}浠€涔堟槸铏氭嫙鍚嶅崟锛熻櫄鎷熷垪琛ㄦ槸鎸囨覆鏌撳垪琛ㄧ殑鍙鍖哄煙锛屼笉娓叉煋鎴栭儴鍒嗘覆鏌撲笉鍙鍖哄煙锛屼粠鑰屽ぇ澶ф彁楂樻覆鏌撴€ц兘鐨勬妧鏈€備负浠€涔堣浣跨敤铏氭嫙鍒楄〃锛熸湁鏃跺€欐垜浠細閬囧埌涓€浜涗笟鍔″満鏅€傝鏄剧ず鐨勫垪琛ㄥ緢闀匡紝涓嶈兘浣跨敤鍒嗛〉銆傚鏋滀竴娆℃妸鎵€鏈夌殑鏁版嵁閮芥覆鏌撳埌椤甸潰涓婏紝娴忚鍣ㄤ細鍙樺緱寰堝崱锛屽洜涓烘覆鏌揹om闇€瑕佸緢澶氭椂闂淬€俈irtualList鏄竴绉嶉拡瀵归暱鍒楄〃鐨勪紭鍖栨柟寮忥紝閫氳繃鍙覆鏌撳彲瑙佸尯鍩熺殑鏁版嵁锛屽ぇ澶ф彁楂樹簡娓叉煋鎬ц兘銆傚浣曚娇鐢ㄨ櫄鎷熷垪琛ㄧ洰鍓嶈櫄鎷熷垪琛ㄧ殑鐭ュ悕搴撴湁寰堝锛屾瘮濡倂ue-virtual-scroller銆乿ue-virtual-scroll-list銆乺eact-virtualized绛夛紝涓嬮潰浠嬬粛涓€涓媣ue-virtual鐨勪娇鐢?scroller锛屼竴涓紭绉€鐨勫簱鏂规硶锛屽啀甯﹀ぇ瀹跺疄鐜颁竴涓畝鍖栫増鐨勮櫄鎷熷垪琛ㄣ€備綘鍑嗗濂戒簡鍚楋紵鎴戜滑璧板惂锛佸畨瑁卬pminstall--savevue-virtual-scrollerRecycleScroller缁勪欢閫傜敤浜庡垪琛ㄤ腑姣忎竴椤归珮搴︾‘瀹氱殑鎯呭喌銆傞珮搴﹀彲浠ヨ缃浉鍚岋紝涔熷彲浠ュ崟鐙厤缃瘡涓猧tem鐨勯珮搴︺€俿rc/components/virtualRecycleScroller.vue.scroller{height:100%;}.desc{濉厖锛?2px锛涙枃鏈榻愶細灞呬腑锛沚order:1pxsolid#ccc;}src/App.vue鏍囩锛?script>importvirtualDynamicScrollerfrom'@/components/virtualDynamicScroller.vue'//妯℃嫙涓€涓暱鍒楄〃constlist=[]for(leti=0;i<10000;i++){list.push({id:i,label:`virtual-scroller${i}`})}//妯℃嫙涓€涓笉鍚屽唴瀹圭殑鍒楄〃椤筶ist[2].label=`virtual-scroller2frontend闃块鍓嶇闃块鍓嶇闃块鍓嶇鍓嶇鍓嶇鍓嶇鍓嶇鍓嶇鍓嶇鍓嶇鍓嶇鍓嶇鍓嶇鍓嶇`exportdefault{components:{virtualDynamicScroller},data(){return{list:list}}}.container{height:300px;border:1pxsolid#ccc;}鏁堟灉濡備笅锛氬彲浠ョ湅鍒板垪琛ㄩ」鐨勯珮搴︽槸闅忕潃鍐呭鍙樺寲鐨勶紝杩樻槸寰堟祦鐣呯殑锛佽櫄鎷熷垪琛ㄧ殑鍘熺悊绗竴娆″惉鍒扳€滆櫄鎷熷垪琛ㄢ€濊繖涓瘝锛屾劅瑙夊緢楂樺ぇ涓娿€傚叾瀹炲紕娓呮瀹冪殑鍘熺悊鍚庯紝浣犱細鍙戠幇瀹冨緢绠€鍗曘€傚湪搴曢儴锛屼竴涓寘鍚墍鏈夊厓绱犵殑妗嗐€傚彲婊氬姩鍖哄煙锛氬彲浠ョ湅浣滄槸涓棿灞傘€傚亣璁炬湁10000鏉℃暟鎹紝姣忎釜鍒楄〃椤圭殑楂樺害涓?0锛岄偅涔堝彲婊氬姩鍖哄煙鐨勯珮搴︿负10000*50銆傝繖涓€灞傜殑鍏冪礌鏄笉鍙鐨勶紝鐩殑鏄埗浣滃嚭鍜岀湡瀹炰竴妯′竴鏍风殑婊氬姩鏉″垪琛ㄣ€傚彲瑙嗗尯鍩熷垪琛細鍙涓烘渶椤跺眰锛屽睍绀哄綋鍓嶅鐞嗙殑鏁版嵁锛岄珮搴︿笌鍙鍖哄煙瀹瑰櫒鐩稿悓銆傚彲瑙佸尯鍩熷垪琛ㄧ殑浣嶇疆鏄姩鎬佸彉鍖栫殑锛屼互浣垮叾濮嬬粓鍑虹幇鍦ㄥ彲瑙佸尯鍩熶腑銆備簡瑙ｄ簡浠ヤ笂姒傚康涔嬪悗锛屾垜浠啀鏉ョ湅鐪嬪綋婊氬姩鏉℃粴鍔ㄦ椂鎴戜滑闇€瑕佸仛浠€涔堬細鏍规嵁婊氬姩璺濈鍜宨tem楂樺害璁＄畻褰撳墠瑕佹樉绀虹殑鍒楄〃鐨剆tartIndex鏍规嵁璁＄畻褰撳墠瑕佹樉绀虹殑itemstartIndex鍜宧eight鍒楄〃鐨別ndIndex鏍规嵁startIndex鍜宔ndIndex鎴彇瀵瑰簲鐨勫垪琛ㄦ暟鎹紝璧嬪€肩粰鍙鍖哄煙鍒楄〃锛屾覆鏌撳埌椤甸潰涓娿€傛牴鎹粴鍔ㄨ窛绂诲拰item楂樺害锛岃绠楀嚭鍙鍖哄煙鍒楄〃鐨勫亸绉昏窛绂籹tartOffset锛岃缃湪鍒楄〃涓婂師鐞嗗氨鏄繖鏍凤紝涓嶇煡閬撳ぇ瀹剁湅鎳傛病鏈夈€備織璇濊鈥滀功璇荤櫨閬嶏紝鍏朵箟鑷幇鈥濓紝浣嗘垜鐩镐俊鈥滅湡鐭ョ伡瑙佲€濓紝杩樻槸鑷繁鏉ュ疄鐜颁竴涓櫄琛ㄥ惂锛佹墜鍐欎竴涓畝鍖栫増鐨勮櫄鎷熷垪琛╯rc/components/myVirtualScroller.vue