Wandering and wonderings

你的名字

主題

| 來自：ywsing0
| 時間：Sat 2018-10-06 09:16:03
|
| 加左個自家製 virtual scroller.
| 聽住捲動的event, 重製 view model 及重繪。
| 如果你睇個 DOM, 係只會畫出scroll 入面可見的項目，而唔係全部 256 個。
| 
| 核心部份（可以吃 pre tag 嗎？）
| 
| rd.tag('div',
| 	rd.tagAttr('style', 'height: 200px; overflow: auto; position: absolute;'),
| 	rd.tagListen('scroll', d =&gt; {
| 		let scrollTop = d.target.scrollTop;
| 		let start = Math.floor(scrollTop / 32);
| 		renderAgain(rd_vm, { ...pvm, start: start, });
| 	}),
| 	rd.tagChildren(rd.tag('div',
| 		rd.tagAttrsf(vm =&gt; ({
| 			style: 'height: ' + (256 - vm) * 32 + 'px; position: relative; top: ' + vm * 32 + 'px;',
| 		})),
| 		(vm0, vm1, dom, domc) =&gt; {
| 			let list0 = s =&gt; {
| 				let e = s + Math.floor(200 / 32) + 1;
| 				let vms = [];
| 				for (let i = s; i &lt; e; i++)
| 					vms.push(i);
| 				return vms;
| 			};
| 
| 			let list1 = s =&gt; s != null ? list0(s) : null;
| 
| 			rd.tagFor(
| 				vm =&gt; vm,
| 				rd.tag('div', rd.tagAttr('style', 'height: 32px;'), rd.tagChildren(rd.child(vm =&gt; document.createTextNode('scrolling ' + vm)),))
| 			)(list1(vm0), list1(vm1), dom, domc);
| 		},
| 	),),
| ),
| 
| 
| 仲可以慢慢抽返段logic 出黎 :-)