虚拟滚动-前端处理海量数据展示

官方网址：scroll

手动实现的参考链接：知乎

原理:假设有一万条数据在前端展示

1.父元素定高度(400px)

2.子元素包括：一个万条数据高度的空元素以保证父元素可正常滑动；一个十条数据展示的盒子absolute；

3.父元素滚动事件中，同步修改数据盒子的transform:translateY('scrollTop');以保证数据盒子一直在父元素的可视区域内；同步修改数据盒子内展示的数组；

initScroll() {

            this.$nextTick(() => {

                this.visibleCount = Math.ceil(this.$refs.scrollWrap.clientHeight / this.itemHeight) * 3 + 2;

                this.start = 0;

                this.end = this.start + this.visibleCount;

                this.visibleData = this.dataSourceTablesList.list.slice(this.start, this.end);

            });

        },

        handleScroll() {

            const scrollTop = this.$refs.scrollWrap.scrollTop;

            const fixedScrollTop = scrollTop - (scrollTop % this.itemHeight);

            this.$refs.content.style.transform = `translate3d(0, ${fixedScrollTop}px, 0)`;

            // this.scrollTimer && clearInterval(this.scrollTimer)

            // this.scrollTimer=setTimeout(e=>{

            //    console.log('setTimeout')

            //    this.start = Math.floor(scrollTop / this.itemHeight);

            //    this.end = this.start + this.visibleCount;

            //    this.visibleData = this.dataSourceTablesList.list.slice(this.start, this.end);

            // },50)

            this.start = Math.floor(scrollTop / this.itemHeight);

            this.end = this.start + this.visibleCount;

            this.visibleData = this.dataSourceTablesList.list.slice(this.start, this.end);

        },
style
 .left_bottom{
                position: relative;
                height: calc(100vh - 141px);
                width: 280px
                margin: 10px
                overflow: auto
                background: #3a3c48
                
            }
            .list-view-phantom {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                z-index: -1;
            }

            .list-view-content {
                left: 0;
                right: 0;
                top: 0;
                position: absolute;
            }

html:

image