【vue】实现高性能虚拟滚动的Vue代码解析

在前端开发中，当需要展示大量数据时，如何保持页面的流畅性是一个挑战。传统的滚动方式会将所有数据一次性渲染到页面，这可能导致页面加载缓慢甚至崩溃。而虚拟滚动技术能够解决这个问题，它只渲染可视区域内的数据，从而提升页面性能。本文将详细解析一个基于Vue框架实现的虚拟滚动示例代码，让我们一步步来看看其中的奥秘。

图例：

HTML 结构和基本样式

首先，让我们看一下HTML结构和基本的样式设置。这段代码主要定义了用于展示纵向和横向滚动列表的两个容器，以及它们的样式设置。

<div id="app">
        <div>纵向滚动数据：{{ clist }}div>
        

        <div class="box" :style="`height:${viewH}px;overflow-y:scroll;`" @scroll="handleScroll">
            
            <ul>
                <li :style="`transform:translateY(${offsetY}px); height:${itemH}px;`" v-for='i in clist'
                    :key="i">{{i}}
                li>
                
            ul>
        div>
        <div>横向滚动数据：{{ clist2 }}div>
        

        <div class="box2" :style="`width:${viewW}px;overflow-x:scroll;`" @scroll="handleScroll2">
            
            <div style="display: flex;">
                
                <div :style="`transform:translateX(${offsetX}px); width:${itemW}px;flex-shrink: 0;`"
                    v-for='i in clist2' :key="i">{{i}}
                div>
                
            div>
        div>
    div>

在样式部分，通过