同时渲染大量数据优化-虚拟列表

最新推荐文章于 2024-01-17 07:15:00 发布

cq-wangyong

最新推荐文章于 2024-01-17 07:15:00 发布

阅读量321

点赞数

分类专栏：前端性能优化文章标签： javascript

本文链接：https://blog.csdn.net/qq_30282133/article/details/112343569

版权

前端性能优化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在网页里面，在某个可视容器内（某个div）一次性渲染所有数据，其实用户也只能看见一部分数据，其余得通过滚动来查看；

那么我们可以只渲染可见部分数据，不可见部分数据不渲染，通过上下padding来进行占位使其可以滚动；

滚动得时候不断计算可所需展示数据的开始下标和结束下标来截取可视数据；

<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 300px;
            height: 600px;
            overflow: auto;
            border: 1px solid;
            margin: 100px auto;
        }

        .item {
            height: 29px;
            line-height: 30px;
            border-bottom: 1px solid #aaa;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container" ref="container">
            <div class="scroll-wrapper"
                :style="{'paddingTop':this.paddingTop + 'px','paddingBottom': this.paddingBottom + 'px'}">
                <div v-for="(item, index) in datas" :key="index" class="item">{{item}}</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: [],//总数居
                startIndex: 0,//可见数据开始下标
                endIndex: 60,//可见数据结束下标
                paddingTop: 0,//上padding
                paddingBottom: 0,//下padding
                allHeight: 0//总高度
            },
            computed: {
                // 可见数据
                datas() {
                    return this.list.slice(this.startIndex, this.endIndex);
                },
                // 数据总条数
                numbers(){
                    return this.list.length;
                }
            },
            watch: {
                list(val) {//根据总数据计算总高度和初始下padding
                    const valLen = val.length;
                    this.allHeight = valLen * 30;
                    this.paddingBottom = this.allHeight - this.datas.length * 30;
                }
            },
            mounted() {
                const container = this.$refs.container;

                // 添加滚动事件
                container.addEventListener('scroll', () => {//计算上下padding和数据开始结束下标

                    const top = container.scrollTop;//获取滚动高度
                    this.startIndex = Math.floor(top / 30);//获取数据开始下标，例如，top为100时，startIndex为3，表示第一二三个数据已经不在可视区域，从第四个开始显示
                    this.endIndex = this.startIndex + 60;//数据结束下标

                    this.paddingTop = top;//滚动距离为上padding
                    
                    // 结束下标大于等于数据个数时表示滑动到了底部，下padding设置为0
                    if (this.endIndex >= this.numbers) {
                        this.endIndex=this.numbers;
                        this.paddingBottom = 0
                        return
                    }
                    console.log(this.endIndex)

                    //下padding等于总高度-上padding-可是区域高度
                    this.paddingBottom = this.allHeight - 600 - this.paddingTop;
                })

                // 添加数据
                let arr = new Array(100000).fill(0);
                arr = arr.map((item, index) => {
                    return index;
                })
                this.list = arr;
            }
        })
    </script>
</body>

</html>

cq-wangyong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
同时渲染大量数据优化-虚拟列表

在网页里面，在某个可视容器内（某个div）一次性渲染所有数据，其实用户也只能看见一部分数据，其余得通过滚动来查看；那么我们可以只渲染可见部分数据，不可见部分数据不渲染，通过上下padding来进行占位使其可以滚动；滚动得时候不断计算可所需展示数据的开始下标和结束下标来截取可视数据；<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta nam
复制链接

扫一扫

专栏目录