來自：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 => {
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 => ({
style: 'height: ' + (256 - vm) * 32 + 'px; position: relative; top: ' + vm * 32 + 'px;',
})),
(vm0, vm1, dom, domc) => {
let list0 = s => {
let e = s + Math.floor(200 / 32) + 1;
let vms = [];
for (let i = s; i < e; i++)
vms.push(i);
return vms;
};
let list1 = s => s != null ? list0(s) : null;
rd.tagFor(
vm => vm,
rd.tag('div', rd.tagAttr('style', 'height: 32px;'), rd.tagChildren(rd.child(vm => document.createTextNode('scrolling ' + vm)),))
)(list1(vm0), list1(vm1), dom, domc);
},
),),
),
仲可以慢慢抽返段logic 出黎 :-)