• 用原生JS实现虚表控件

    在HTML/dom环境，纯JS“无限”滚动列表与众不同，和自绘制界面实现的ListView是不一样的，更加需要dom操作的技巧，讲究的要么是“左脚蹬右脚”循环覆盖，要么是滚动一点、增长一点。不过后者严格来说不是虚表，仅仅是懒加载而已。

    “左脚蹬右脚”循环覆盖

    其实“摸石过河”更加形象一点：

    往下滚动，快到底了，就拿走上面的区块补充为下面的区块。往上滚动同理（相反），需要保持列表滚动的一致性。

    分页层级：区块 -> 页面 -> 列表行。

    1页面 == 30行
    1区块 == 10页面 == 300行

    区块是列表重组的单元，页面是获取数据、绑定数据的单元。

    本例使用三个区块（红色、绿色、蓝色）。

    基本实现

    性能还可以，疯狂滚动也就 8% CPU + 25% GPU。
    请添加图片描述

    共256行，不知道有没有BUG：

    <body>
    <div id="listView" style="height:100%; background:#00ff335f; overflow:scroll;">
    </div>


    <script>
		var pageSz = 30; var minRowHeight=1.5;
        var blockSz = pageSz*10; // 每 pageSz * 10 = 一页， 是列表重组的单位x
		var doc=document,w=window;
		var debug = console.log;
        function craft(t, p, c) {
            t = doc.createElement(t);
            if(c)t.className=c;
            if(p)p.appendChild(t);
            return t;
        }
        function setVisible(e,v) {
            e.style.display = v?'block':'none';
        }
		var listView = document.getElementById('listView');
        var topRow, minBlockHeight, minRowPageHeight;
        
        function initBlock(p, pagePosition) {
            if(!p.init) {
                p.init = 1;
                for(var i=0;i<10;i++) {
                    var rp = craft('DIV', p, 'page');
                    rp.style.height=(minRowHeight*pageSz)+'em';
                }
            }
        }

        function initRowPage(p) {
            if(!p.init) {
                p.init = 1;
                p.hide = 0;
                p.style.height='auto';
                for(var i=0;i<pageSz;i++) 
                {
                    var row = makeItem(p);
                }
            }
        }

		function makeItem(rowPage){
			var rowItem = craft('DIV', rowPage, 'item');
			rowItem.style.minHeight=minRowHeight+'em';
			//rowItem.innerText = ''+position;
			return rowItem;
		}
        
        var tmp = makeItem(listView);
        var minRowHeightPx = tmp.offsetHeight;
        tmp.remove();
		
		var itemCount = 1000;
        var maxRowDet = 0;
        var rpA, rpB, 刑天=0;
        
        function reset(total, percent) {
            itemCount = total;
            var blocks = [];
            listView.onscroll = 0;
            listView.innerHTML='';
            listView.scrollTop = 0;
            topRow = maxRowDet = rpA = rpB = 0;
            for(var i=0;i<3;i++) {
                var block = craft('DIV', listView, 'block');
                initBlock(block);
                blocks.push(block);
                if(blockSz*i >= total) {
                    setVisible(block,0);
                }
                else if(blockSz*(i+1) >= total) {
                    block.size = total-blockSz*i;
                    for(var j=0;j<10;j++) {
                        setVisible(block.children[j], j*pageSz<block.size);
                    }
                }
                else block.size = blockSz;
                maxRowDet += block.size;
            }
            minBlockHeight = blocks[0].offsetHeight;
            minRowPageHeight = minBlockHeight/10;
            
            blocks[0].style.background='#ff00d4f8'
            blocks[1].style.background='#00ff335f'
            blocks[2].style.background='#00f7fff8'
            
            if(percent > 0) {
                if(percent>1) percent=0.99;
                var pos = total*percent;
                percent = 0;
                var d = pos;
                if(pos>3*blockSz) {
                    d = blockSz;
                    topRow = parseInt(pos/d)*d;
                    d = pos - topRow;
                    maxRowDet = topRow+blockSz*3;
                }
                percent = d * minRowHeightPx;
                debug('percent', topRow, d, percent)
            }
            lstScroll();
            listView.onscroll = lstScroll;
            
            if(topRow || percent) {
                listView.scrollTop += percent;
                rpA = rpB = 0;
                lstScroll();
            }
        }
        
        reset(1000);

		function lstScroll(e) {
            //debug(e);
            // if(刑天!=0) {
            //     if(e.timeStamp-刑天<1200) return;
            //     刑天=0;
            // }
            var y=listView.scrollTop;
            if(itemCount>maxRowDet &&  y>= listView.scrollHeight*0.9) {
                debug('底部！')
				var p0=listView.children[0];
				//p0.remove();
				listView.append(p0);
                topRow += p0.size;
                var size = Math.min(blockSz, itemCount-maxRowDet);
                maxRowDet += size;
                if(p0.size!==size) {
                    p0.size=size;
                    for(var i=0;i<10;i++) {
                        setVisible(p0.children[i],i*pageSz<size);
                    }
                }
                repage();
            }
            else if(topRow>0 && y <= listView.clientHeight*0.2) {
                debug('顶部111！')
				var p0=listView.children[2];
				//p0.remove();
                maxRowDet -= p0.size||0;
				listView.insertBefore(p0, listView.children[0]);
                var size = Math.min(blockSz, topRow);
                topRow -= size;
                if(p0.size!==size) {
                    p0.size=size;
                    for(var i=0;i<10;i++) {
                        var page = p0.children[i],v=i*pageSz<size;
                        setVisible(page,v);
                        if(v) {
                            if(page.hide) {
                                for(var j=0;j<pageSz;j++) 
                                    setVisible(page.children[j],1);
                                page.hide=0;
                            }
                        }
                    }
                }
                var h=p0.offsetHeight;
                //listView.onscroll = 0;
                listView.scrollTop = h+y;
                //listView.onscroll = lstScroll;

                //刑天 = e.timeStamp;
                //repage();
            }
            else if(!rpA || y<rpA.offsetTop
                || rpB && y+listView.offsetHeight>rpB.offsetTop+rpB.offsetHeight) {
                repage();
            }
        }
        
        listView.onscroll = lstScroll;

        function getNextNode(n, e) {
            var a = n.nextElementSibling;
            if (a) {
                if(a.style.display=='none')
                    return getNextNode(a, e);
                return a;
            }
            var bk = n.parentNode.nextElementSibling;
            n = bk && bk.firstElementChild;
            if(n && n.style.display=='none')
                n = 0;
            return n;
        }

        function repage() {
            var bk,pos = 0;
            var y=listView.scrollTop, y1=y+listView.offsetHeight;
            var findSt=1,findEd=1;
            for(var i=0;i<3;i++) {
                bk = listView.children[i];
                if(bk.offsetTop+bk.offsetHeight>y) {
                    pos = i;
                    break;
                }
            }
            debug('repage', pos)
            var minSt = pageSz - (bk.offsetTop+bk.offsetHeight-y)/minRowHeight;
            if(minSt<0) minSt=0;
            minSt=0;
            pos = topRow + pos*blockSz + minSt;
            var page = bk.children[minSt];
            rpA=rpB=0;
            var height=0,pageCnt=1;
            while(page) {
                if(!rpA) {
                    //debug('finding...', page, off);
                    if(page.offsetTop+page.offsetHeight > y) {
                        height=page.offsetTop;
                        rpA = page;
                        debug('rpA', minSt)
                    }
                }
                if(rpA) {
                    bindRowPage(page, pos);
                    height += Math.min(minRowPageHeight, page.offsetHeight);
                    if(height>y1) {
                        rpB = page;
                        break;
                    }
                    pageCnt++;
                }
                pos+=pageSz;
                page = getNextNode(page);
                minSt++;
            }
        }
        
        function bindRowPage(page, pos) {
            initRowPage(page);
            debug('bindRowPage', pos);
            page.hide=0;
            for(var i=0;i<pageSz;i++) 
            {
                var row = page.children[i];
                if(pos>=itemCount) {
                    setVisible(row,0);
                    page.hide = 1;
                } else {
                    setVisible(row,1);
                    row.innerText=pos+'';
                }
                pos++
            }
        }
		
		
    </script>
   
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255

    测试代码：

    reset(总行数, 恢复百分比位置)

    • 1

    如reset(10000, .5)、reset(1000, .5)、reset(100, .5) 均能恢复到列表中间位置。

    reset(9002, 0.999) 恢复到列表末尾位置。
    请添加图片描述

    扩展

    可考虑css模拟滚动条，显示完整的滚动条而不是现在这样一跳一跳的。

    或者参考其他成熟列表库，以前搜索过，名字忘记了…

    或者这个也不错 ： js 虚拟列表，思路不同，显示的是完整滚动条。

  • 相关阅读:
    Mac系统配置k8s completion命令补全
    java计算机毕业设计基于springboot+vue+elementUI的垃圾分类网站系统(前后端分离）
    CentOS7.9+Kubernetes1.28.3+Docker24.0.6高可用集群二进制部署
    activiti-spring-app-process 源码分析
    科普下抖音的规则，为什么别人的内容很容易火，而我的很难？
    如何删除掉MySQL的多余的实例
    Linux 环境部署
    移动WEB开发之流式布局--二倍图
    记录一次使用网云穿实现内网穿透操作
    Pytorch intermediate(四) Language Model (RNN-LM)
  • 原文地址：https://blog.csdn.net/sinat_27171121/article/details/127577283